Кажется, я где-то слышал / читал, что <div>внутри - <td>нет-нет. Не то чтобы это не сработало, просто что-то о том, что они действительно несовместимы в зависимости от типа дисплея. Не могу найти никаких доказательств, подтверждающих мою догадку, поэтому могу полностью ошибаться.
Использование 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%;и без рамки, поэтому он заполняет тд без какого-либо визуального воздействия. а затем абсолютный.кроме этого, почему бы просто не разделить ячейку?
источник
Я столкнулся с проблемой, поместив
<div>внутрь<td>.Мне не удалось идентифицировать div,
document.getElementById()если я поместил его внутри td. Но снаружи все работало нормально.источник
Как все упомянули, это может быть не очень хорошей идеей для целей макета. Я пришел к этому вопросу, потому что мне было интересно то же самое, и я только хотел знать, будет ли это действительный код.
Поскольку он действителен, вы можете использовать его для других целей. Например, я собираюсь использовать его для того, чтобы поместить несколько причудливых "CSSed" div внутри строк таблицы, а затем использовать быструю функцию jQuery, чтобы позволить пользователю сортировать информацию по цене, имени и т. Д. Таким образом, только таблица макета даст мне «вертикальный порядок», но я буду контролировать ширину, высоту, фон и т. д. блоков с помощью CSS.
источник
Два способа справиться с этим
divвнутрьtbodyтегаdivвнутрьtrтегаОба подхода действительны, если вы видите предпочтение: https://stackoverflow.com/a/23440419/2305243
источник
Это нарушает семантику , вот и все. Он работает нормально, но в будущем могут появиться программы чтения с экрана или что-то еще, что не понравится обработке вашего HTML, если вы «нарушите семантику».
источник