Блог

Главная - Вопросы по программированию - Повернуть svg-изображение внутри таблицы, но td не следует по высоте и ширине

Повернуть svg-изображение внутри таблицы, но td не следует по высоте и ширине

#html #css #html-table #css-transforms

#HTML #css #html-таблица #css-преобразования

Вопрос:

Сейчас я изучаю CSS, но на данный момент я немного потерялся. Чего я хочу добиться, так это размера 3×4 table с SVGS в нем. Я должен повернуть изображение на 90 градусов, но после этого я покажу ниже, что происходит. Проблема в том, что td внутренняя table часть не соответствует ширине. Я не знаю, является ли это базовым поведением таблиц или чем-то еще, но потребовались часы исследований, и ничего не нашли. Проблема

Вот что у меня есть:

 .game img {
  display: inline-block;
  transform: rotate(90deg);
}

.game {
  margin: auto;
}

.game td {
  vertical-align: middle;
  text-align: center;
}

table,
th,
td {
  border: 1px solid black;
}

Ответ №1:

Повернутые элементы занимают пространство, которое они занимали бы без поворота (что также видно на опубликованном вами изображении), что может привести к перекрытиям.

Возможными решениями могут быть: 1.) присвоить a min-width символу td s, который равен высоте изображений, или 2.) изменить сами изображения на квадратные (высота = ширина), при необходимости сделав дополнительные области прозрачными, или 3.) сохранить изображениев повернутом состоянии и используйте это.

Комментарии:

1. Спасибо за редактирование, мой родной язык не английский 🙂 . Решение 1 в основном работает, но высота ячейки все еще слишком велика. У меня есть display : inline-block для таблицы, и из-за этого я не могу установить max-height . Так что 2 и 3 не вариант, потому что в проекте большое количество svg-файлов.