Кажется, я слышал/читал где-то, что <div> внутри <td> был не-нет. Не то, чтобы это не сработало, просто что-то о них не было действительно совместимым на основе их типа отображения. Не могу найти никаких доказательств, подтверждающих мою догадку, поэтому я могу быть абсолютно неправ.Является ли DIV внутри TD плохой идеей?
Используя div instide td не хуже, чем любой другой способ использования таблиц для разметки. (Некоторые люди никогда не используют таблицы для макета, хотя, и я являюсь одним из них.)
Если вы используете div в td, вы, однако, попадете в ситуацию, когда может быть трудно предсказать, как эти элементы будут быть размером. По умолчанию для div необходимо определить его ширину от своего родителя, а значение по умолчанию для ячейки таблицы - определить его размер в зависимости от размера его содержимого.
Должны быть определены правила для размера div, но правила для размера td не так определены, поэтому разные браузеры используют несколько разные алгоритмы.
№ Не обязательно.
Если вам нужно разместить DIV в TD, убедитесь, что вы правильно используете TD. Если вам не нравятся табличные данные и семантика, то в конечном итоге вам не понадобятся DIV в TD. Я не думаю, что есть проблема, хотя - если у вас есть, чтобы это сделать, вы в порядке.
Согласно спецификации HTML
<div> могут быть размещены где поток контента ожидается 1, которая является моделью <td> Content 2.
Табличная ячейка может на законных основаниях содержать элементы уровня блока, поэтому она не является, по сути, faux-pas. Разумеется, имплантация браузера оставляет эту теоретико-теоретическую позицию. Это может вызвать проблемы с компоновкой и ошибки.
Хотя, поскольку таблицы использовались для компоновки, а иногда еще есть, я полагаю, что большинство браузеров правильно отобразит контент. Даже IE.
Я подозреваю, что реализация браузера - это то, где я получил свое «ожидание, это плохая идея» от , – jcollum
Это ломается semantics, вот и все. Он отлично работает, но могут быть экранизаторы или что-то по дороге, которые не будут наслаждаться обработкой вашего HTML, если вы «сложите семантику».
@Greg, почему он нарушает семантику? Div - это просто разделение блочного уровня или разделение содержимого страницы. Таким образом, нецелесообразно и бесповоротно анти-семантично размещать их в ячейке таблицы. –
Я попытался написать несколько ответов к вам, которые оправдали мой ответ, но я продолжал сходить к личным мнением. :/Я думаю, мой лучший ответ будет заключаться в том, что все, что есть в вашей ячейке, возможно, лучше представлено другим тегом HTML. Если вы действительно разделяете свои ячейки на компоненты, то вам, вероятно, не следует использовать таблицу для начала, вы должны стилизовать серию DIV для вашего макета. Не знаю, почему я не могу поставить это в лучшие слова ... пожалуй, сделай это своим ИМХО. – Greg
Хм, вы имеете в виду, что TD семантически то же самое, что и DIV, так почему у них два из них подряд? – jcollum
После проверки XHTML DTD я обнаружил, что < ТДА > -элементного разрешено содержать блок элементы, такие как заголовки, списки, а также < ДИВА > -элементов. Таким образом, использование элемента <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 с position: relative; на td вы столкнетесь с проблемами.FF, safari и chrome (mac, а не PC) не будут позиционировать div относительно td (как и следовало ожидать) это также верно для divs с display: table-whatever;, поэтому, если вы хотите сделать это, вам понадобятся два divs, один для контейнер width: 100%;height: 100%; и без границы, чтобы он заполнял тд без какого-либо визуального воздействия. а затем абсолютный.
кроме этого, почему бы не просто расколоть ячейку?
Единственный практический ответ, не связанный с святым –
Как уже упоминалось, это может быть не очень хорошо для целей макета. Я пришел к этому вопросу, потому что мне было интересно то же самое, и я только хотел узнать, будет ли это действительный код.
Поскольку это действительно, вы можете использовать его для других целей. Например, то, что я собираюсь использовать для этого, - это добавить некоторые фантастические «CSSed» div внутри строк таблицы, а затем использовать быструю функцию jQuery, чтобы позволить пользователю сортировать информацию по цене, имени и т. Д. Таким образом, только таблица макета даст мне «вертикальный порядок», но я буду контролировать ширину, высоту, фон и т. д. divs с помощью CSS.
У меня возникла проблема, поставив <div> внутри <td>.
Мне не удалось идентифицировать div, используя document.getElementById(), если я поместил его внутри td. Но снаружи он работал нормально.
Два способа борьбы с ним
div внутри tbody тегаdiv внутри tr тегаОба подхода действительны, если вы видите feference: https://stackoverflow.com/a/23440419/2305243
Я подозреваю, что это произошло с моей догадки. Спасибо, что разобрался. – jcollum
Если ваши столбцы имеют заданную ширину, это не должно быть проблемой. Просто не забудьте установить таблицу-макет: зафиксировано в таблице, чтобы браузеры не переопределяли ваши ширины (потенциально приводящие к неприятностям). –
Он никогда не говорил, что использует таблицы для макетов. – texelate