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

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

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

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

После проверки XHTML DTD я обнаружил, что элементу ‹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">

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

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

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

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

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

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

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

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

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

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

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

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

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

1. поместите div внутри тега tbody
2. поместите div внутри тега tr

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

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