TD内的DIV是一个坏主意吗?
好像我听说/读了一个<td>
里面的<td>
是不可以的。 不是说它不会工作,只是基于它们的显示types而不是真正兼容的东西。 找不到任何证据来支持我的预感,所以我可能是完全错误的。
使用div
来表示td
并不比使用表格进行布局的其他方式更糟糕。 (有些人从来不使用表格来进行布局,而我恰好是其中之一。)
如果你在td
使用div
,你将会遇到一个很难预测元素大小的情况。 div的默认值是从其父级确定其宽度,表格单元格的默认值是根据其内容大小确定其大小。
标准中应该如何规定div
的规则,但是如何定义td
的规则还没有被很好的定义,所以不同的浏览器使用稍微不同的algorithm。
在检查了XHTML DTD之后,我发现一个<TD>元素可以包含块元素,比如标题,列表和<DIV>元素。 因此,在<TD>元素中使用<DIV> -element不违反XHTML标准。 我很确定HTML的其他现代变体对于<TD>元素具有相同的内容模型。
不,不一定。
如果您需要在TD中放置DIV,请确保正确使用TD。 如果你不关心表格数据和语义,那么你最终将不会关心TD中的DIV。 我不认为有一个问题,但如果你必须这样做,你没事。
根据HTML规范
一个<div>
可以放在预期stream内容为1的地方 ,也就是<td>
内容模型2 。
表格单元格可以合法地包含块级元素,所以它本质上不是人造的。 浏览器的实现,当然,这留下了一个推测理论的位置。 这可能会导致布局问题和错误。
虽然表格被用于布局 – 有时候还是这样 – 我想大多数浏览器都会正确地渲染内容。 甚至IE。
如果你想使用position:absolute; 在与position: relative;
的div position: relative;
在TD你会遇到问题。 FF,safari和chrome(mac,不是PC虽然)不会将div相对于td放置(就像你所期望的那样),对于带有display: table-whatever;
div也是如此display: table-whatever;
所以如果你想这样做,你需要两个div,一个是容器width: 100%;
height: 100%;
没有边界,所以它没有任何视觉冲击填补了TD。 然后是绝对的。
除此之外,为什么不分裂细胞呢?
我通过在<td>
放置一个<div>
解决这个问题。
我无法识别div使用document.getElementById()
如果我把它放在TD内。 但在外面,它工作正常。
正如大家提到的,这可能不是一个好主意的布局的目的。 我到了这个问题,因为我想知道是否一样,我只想知道它是否是有效的代码。
既然它是有效的,你可以用于其他目的。 例如,我要使用它是为了在表格行中放置一些奇特的“CSSed”div,然后使用快速的jQuery函数让用户按价格,名称等对信息进行sorting。这样,只有布局表会给我是“垂直顺序”,但是我会通过CSS来控制div的宽度,高度,背景等等。
两种处理方式
- 把
div
放在tbody
标签里 - 把
tr
放在tr
标签里面
这两种方法都是有效的,如果你看到的问题: https ://stackoverflow.com/a/23440419/2305243
它打破了语义 ,就是这样。 它工作正常,但可能有屏幕阅读器或任何东西,如果你“破坏语义”,将不喜欢处理你的HTML。