将 DIV 放在 TD 中是一个坏主意吗?
-
12-09-2019 - |
题
好像我在某处听到/读到过 <div>
里面的一个 <td>
是一个禁忌。并不是说它不起作用,只是它们根据显示类型并不真正兼容。找不到任何证据来支持我的直觉,所以我可能完全错了。
解决方案
使用div
instide一个td
不大于使用表格布局的任何其他方式恶化。 (有些人从来不使用表格排版虽然,我正好是其中之一。)
如果您在div
使用td
你会得到但在一种情况,它可能是很难预测的因素将如何调整大小。对于一个div默认的是从它的父确定其宽度,以及用于表格单元格的默认是根据它的内容的大小,以确定它的大小。
有关如何的尺寸应是公在标准中定义的div
,但对于尺寸应一个td
怎么也不以及所定义的规则,所以不同的浏览器使用稍微不同的算法规则。
其他提示
检查 XHTML DTD之后我发现一个
下面是相关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">
一个表格单元可以合法地包含块级元素,所以它不是固有地,一个人造PAS。浏览器implentation,当然,这留下一个投机理论位置。它可能会导致布局的问题和缺陷。
虽然如表被用于布局 - 和有时仍然是 - 我想,大多数浏览器将正确地呈现内容。甚至IE。
如果你想使用的位置是:绝对的;与对TD position: relative;
股利你会遇到的问题。 FF,Safari和Chrome浏览(苹果机,勿尽管PC)将不会相对于TD股利(如你所期望的),所以如果你想要做的,你需要两个div,一个是这也是与display: table-whatever;
div的真实位置容器width: 100%;
height: 100%;
和无边框,使其充满TD没有任何的视觉冲击力。然后绝对的。
比其他为什么不只是分裂细胞?
我已经通过放置<div>
内部<td>
所面临的问题。
我无法识别使用document.getElementById()
如果我放置里面TD在div。但外面,将其工作的罚款。
大家都提到的,它可能不是布局的目的是一个好主意。我抵达这个问题,因为我想知道同样的,我只是想知道这是否是有效的代码。
由于它是有效的,你可以将它用于其他目的。例如,我什么都使用它是把一些花哨“CSSED”的div内表行,然后使用快速jQuery的功能,允许用户按价格排序,名称等这样的信息只有布局表会给我是“垂直顺序”,但我会通过CSS控制宽度,高度,背景等的div的。
两种方式处理它
- 把
div
内部tbody
标记 - 把
div
内部tr
标记
这两种方法是有效的,如果你看到feference: https://stackoverflow.com/a/23440419/2305243
它打破语义,仅此而已。它工作正常,但也有可能是屏幕阅读器或下来的东西,不会享受处理您的HTML,如果你“打破语义”的道路。