Чи погана ідея DIV всередині TD?

Здається, я десь чув / прочитав, що <div>всередині «a <td>-no» немає. Не те, що це не буде працювати, лише щось про них не є дійсно сумісним залежно від типу їх відображення. Не можу знайти жодних доказів, щоб підкріпити свою думку, тому я можу абсолютно помилятися.

Використання divinstide a tdне гірше, ніж будь-який інший спосіб використання таблиць для компонування. (Деякі люди ніколи не використовують таблиці для компонування, і я буваю однією з них.)

Якщо ви використовуєте a 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>змістовою моделлю ² .

Комірка таблиці може законно містити елементи рівня блоку, тому вона, по суті, не є штучною пасом. Звичайно, реалізація браузера залишає це умоглядно-теоретичне положення. Це може спричинити проблеми з компонуванням та помилки.

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

Якщо ви хочете використовувати позицію: абсолютна; на діві з position: relative;на td ви зіткнетеся з проблемами. FF, safari та chrome (mac, а не ПК) не будуть розміщувати div відносно td (як би ви очікували), це також стосується divs з, display: table-whatever;тому якщо ви хочете зробити це, вам потрібні два діви, один для контейнер width: 100%; height: 100%;і без кордону, тому він заповнює тд без візуального впливу. а потім абсолютний.

крім цього, чому б просто не розділити клітинку?

Я зіткнувся з проблемою, помістивши <div>всередину <td>.

Я не зміг ідентифікувати div, використовуючи, document.getElementById()якщо я розміщую його всередині TD. Але надворі це працювало чудово.

Як усі згадували, це може бути не дуже хорошою ідеєю для цілей компонування. Я прийшов до цього питання, тому що мені було цікаво те саме, і мені хотілося знати лише, чи дійсний це код.

Оскільки він дійсний, ви можете використовувати його для інших цілей. Наприклад, те, для чого я буду використовувати це, - це помістити кілька фантазійних "CSSed" дівок у рядки таблиці, а потім скористатися швидкою функцією jQuery, щоб користувач міг сортувати інформацію за ціною, назвою тощо. Таким чином, Тільки таблиця макетів дасть мені "вертикальний порядок", але я буду контролювати ширину, висоту, тло та ін. за допомогою CSS.

Два способи боротьби з цим

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

Обидва підходи дійсні, якщо ви бачите перегляд: https://stackoverflow.com/a/23440419/2305243

Це порушує семантику , ось і все. Це добре працює, але можуть бути читачі екранів або щось на шляху, що не сподобається обробляти ваш HTML, якщо ви "зламаєте семантику".