Является ли DIV внутри TD плохой идеей? - PullRequest
Новая
       36

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

136 голосов
/ 10 июля 2009

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

Ответы [ 9 ]

139 голосов
/ 10 июля 2009

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

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

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

68 голосов
/ 10 июля 2009

После проверки XHTML DTD я обнаружил, что

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

Вот соответствующие правила 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">
37 голосов
/ 10 июля 2009

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

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

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

A <div> можно разместить там, где ожидается содержание потока 1 , то есть модель содержания <td> 2 .

14 голосов
/ 10 июля 2009

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

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

13 голосов
/ 25 мая 2011

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

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

2 голосов
/ 12 июля 2011

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

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

1 голос
/ 07 июля 2011

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

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

0 голосов
/ 04 ноября 2016

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

  1. положить div внутрь tbody тег
  2. положить div внутрь tr тег

Оба подхода действительны, если вы видите, что:

0 голосов
/ 10 июля 2009

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

...