Ответы:
Использование divinstide tdне хуже, чем любой другой способ использования таблиц для разметки. (Некоторые люди никогда не используют таблицы для разметки, и я один из них.)
Однако, если вы используете a divв a, tdвы попадете в ситуацию, когда будет сложно предсказать размер элементов. По умолчанию для div ширина определяется по родительскому элементу, а по умолчанию для ячейки таблицы определяется ее размер в зависимости от размера ее содержимого.
Правила того, как divдолжен быть размер, четко определены в стандартах, но правила того, как tdдолжен быть размер, не так хорошо определены, поэтому разные браузеры используют несколько разные алгоритмы.
table-layout:fixedCSS - это не то, что вы думаете. Это уменьшает количество вычислений, которые браузеры выполняют при визуализации таблиц, вычисляя только размер первой строки.
После проверки 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
A <div>может быть размещен там, где ожидается содержимое потока 1 , которое является <td>моделью содержимого 2 .
Ячейка таблицы может законно содержать элементы уровня блока, так что это, по сути, не ошибка. Браузерная реализация, конечно, оставляет эту теоретико-умозрительную позицию. Это может вызвать проблемы с макетом и ошибки.
Хотя таблицы использовались для компоновки - а иногда все еще используются - я полагаю, что большинство браузеров будут правильно отображать контент. Даже IE.
Если вы хотите использовать position: absolute; в div с position: relative;td вы столкнетесь с проблемами. FF, safari и chrome (mac, но не ПК) не будут позиционировать div относительно td (как и следовало ожидать), это также верно для div, display: table-whatever;поэтому, если вы хотите сделать это, вам понадобятся два div, один для контейнер width: 100%; height: 100%;и без рамки, поэтому он заполняет тд без какого-либо визуального воздействия. а затем абсолютный.
кроме этого, почему бы просто не разделить ячейку?
Как все упомянули, это может быть не очень хорошей идеей для целей макета. Я пришел к этому вопросу, потому что мне было интересно то же самое, и я только хотел знать, будет ли это действительный код.
Поскольку он действителен, вы можете использовать его для других целей. Например, я собираюсь использовать его для того, чтобы поместить несколько причудливых "CSSed" div внутри строк таблицы, а затем использовать быструю функцию jQuery, чтобы позволить пользователю сортировать информацию по цене, имени и т. Д. Таким образом, только таблица макета даст мне «вертикальный порядок», но я буду контролировать ширину, высоту, фон и т. д. блоков с помощью CSS.
Два способа справиться с этим
divвнутрь tbodyтегаdivвнутрь trтегаОба подхода действительны, если вы видите предпочтение: https://stackoverflow.com/a/23440419/2305243
Это нарушает семантику , вот и все. Он работает нормально, но в будущем могут появиться программы чтения с экрана или что-то еще, что не понравится обработке вашего HTML, если вы «нарушите семантику».