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的宽度,高度,背景等等。

两种处理方式

  1. div放在tbody标签里
  2. tr放在tr标签里面

这两种方法都是有效的,如果你看到的问题: https ://stackoverflow.com/a/23440419/2305243

它打破了语义 ,就是这样。 它工作正常,但可能有屏幕阅读器或任何东西,如果你“破坏语义”,将不喜欢处理你的HTML。