Является ли DIV внутри TD плохой идеей?

Question

Кажется, я где-то слышал/читал, что <div> внутри <td> было нет-нет.Не то чтобы это не сработало, просто они не совсем совместимы в зависимости от типа дисплея.Никаких доказательств, подтверждающих мою догадку, я не нашел, так что могу быть совершенно не прав.

Answer 1

Используя div внутри td не хуже любого другого способа использования таблиц для верстки.(Некоторые люди никогда не используют таблицы для разметки, и я один из них.)

Если вы используете div в td однако вы попадете в ситуацию, когда будет трудно предсказать, какой размер будут иметь элементы.По умолчанию для элемента div определяется его ширина по родительскому элементу, а для ячейки таблицы по умолчанию используется определение ее размера в зависимости от размера ее содержимого.

Правила того, как div размер должен быть четко определен в стандартах, но правила того, как td Размер должен быть не так четко определен, поэтому разные браузеры используют несколько разные алгоритмы.

Answer 2

После проверки XHTML-ОТД Я обнаружил, что элемент <TD> может содержать блочные элементы, такие как заголовки, списки, а также элементы <DIV>.Таким образом, использование элемента <DIV> внутри элемента <TD> не нарушает стандарт XHTML.Я почти уверен, что другие современные варианты HTML имеют эквивалентную модель контента для элемента <TD>.

Вот соответствующие правила DTD:

<!ELEMENT td %Flow;>
<!-- %Flow; mixes block and inline and is used for list items etc. -->
<!ENTITY %Flow "(#PCDATA | %block; | form | %inline; | %misc;>
<!ENTITY %block "p | %heading; | div | %lists; | %blocktext; | fieldset | table">

Answer 3

Нет.Не обязательно.

Если вам нужно поместить DIV в TD, убедитесь, что вы используете TD правильно.Если вас не волнуют табличные данные и семантика, то в конечном итоге вас не будут интересовать DIV в TD.Я не думаю, что это проблема - если вы иметь сделать это, ты в порядке.

Согласно спецификации HTML

А <div> можно разместить там, где поток содержимого ожидается¹, какой <td> модель контента².

Answer 4

Ячейка таблицы может законно содержать элементы уровня блока, так что это по сути не является ошибкой.Реализация браузера, конечно, оставляет эту спекулятивно-теоретическую позицию.Это может вызвать проблемы с макетом и ошибки.

Хотя таблицы использовались для разметки (а иногда и до сих пор), я полагаю, что большинство браузеров будут правильно отображать контент.Даже ИЕ.

Answer 5

Если вы хотите использовать позицию:абсолютный;в div с position: relative; в этот день у вас возникнут проблемы.FF, Safari и Chrome (хотя Mac, а не ПК) не будут позиционировать div относительно td (как и следовало ожидать), это также верно для div с display: table-whatever; поэтому, если вы хотите это сделать, вам нужны два элемента div, один для контейнера width: 100%; height: 100%; и нет границы, поэтому он заполняет td без какого-либо визуального воздействия.а затем абсолютный.

кроме этого, почему бы просто не разделить ячейку?

Answer 6

Я столкнулся с проблемой, разместив <div> внутри <td>.

Мне не удалось идентифицировать div, используя document.getElementById() если я помещу это внутри td.Но снаружи все работало нормально.

Answer 7

Как все уже упоминали, это может быть не очень хорошей идеей для целей макетирования.Я пришел к этому вопросу, потому что мне было интересно то же самое, и я только хотел знать, будет ли это действительный код.

Поскольку он действителен, вы можете использовать его для других целей.Например, я собираюсь использовать его для размещения некоторых причудливых элементов div «CSS» внутри строк таблицы, а затем использовать быструю функцию jQuery, чтобы позволить пользователю сортировать информацию по цене, имени и т. д.Таким образом, единственная таблица макета, которая мне даст, - это «вертикальный порядок», но я буду контролировать ширину, высоту, фон и т. д. элементов div с помощью CSS.

Answer 8

Два способа справиться с этим

1. помещать div внутри tbody ярлык
2. помещать div внутри tr ярлык

Оба подхода действительны, если вы видите разницу: https://stackoverflow.com/a/23440419/2305243

Answer 9

Это ломает семантика, вот и все.Он работает нормально, но в будущем могут появиться программы чтения с экрана или что-то еще, которым не понравится обработка вашего HTML, если вы «нарушите семантику».