TD内的DIV是个坏主意吗？

Posted 2023-02-21

【中文标题】TD内的DIV是个坏主意吗？

【英文标题】：Is a DIV inside a TD a bad idea?

【发布时间】：2010-11-09 19:14:34

【问题描述】：

似乎我在某处听说/读到 <div> 内的 <td> 是一个禁忌。并不是说它不起作用，只是因为它们的显示类型并不真正兼容。找不到任何证据来支持我的预感，所以我可能完全错了。

【参考方案1】：

在td 中使用div 并不比使用表格进行布局的任何其他方式差。 （但有些人从不使用表格进行布局，而我恰好是其中之一。）

如果您在td 中使用div，那么您将遇到难以预测元素大小的情况。 div 的默认值是根据其父级确定其宽度，而表格单元格的默认值是根据其内容的大小确定其大小。

标准中明确定义了div 大小的规则，但没有明确定义td 大小的规则，因此不同的浏览器使用的算法略有不同。

【讨论】：

我怀疑这就是我的预感。感谢您清理它。

如果您的列有预先指定的宽度，那应该不是问题。只要记住在桌子上设置 table-layout:fixed ，这样浏览器就不会覆盖你的宽度（可能会导致麻烦）

他从未说过他使用表格进行布局。

@texelate table-layout:fixed CSS 不是你想象的那样。它通过仅计算第一行的大小来减少浏览器在呈现表格时所做的计算量。

【参考方案2】：

在检查Xhtml DTD 之后，我发现

元素可以包含块元素，如标题、列表和 元素。因此，在 元素内使用 元素不会违反 XHTML 标准。我很确定 HTML 的其他现代变体具有与 -元素等效的内容模型。

以下是相关的 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">

【讨论】：

这是我正在寻找的具体答案。非常感谢你。我想我今晚会睡得稍微好一点。

胸肌支持的唯一答案。

请与我们分享它在 DTD 中的解释。这不是一个容易阅读的文件。谢谢！

@redolent：我在答案中添加了相关的 DTD 规则。

HTML5 规范不是 XHTML 怎么样？

【参考方案3】：

没有。不一定。

如果您需要在 TD 中放置 DIV，请确保正确使用 TD。如果您不关心表格数据和语义，那么您最终将不会关心 TD 中的 DIV。不过我不认为有问题 - 如果你必须这样做，你就可以了。

根据 HTML 规范

<div>可以放置在流内容预期的位置¹，即<td>内容模型².

【讨论】：

我一直想用是或否来回答问题；）

+1 - 真的很想用更机智的东西来回答，但失败了。

尽管这得到了更多的支持，但我认为 Guffa 提出了一个此处未提及的观点（并且可能是我预感的来源）

【参考方案4】：

table-cell 可以合法地包含块级元素，因此它本质上不是错误的。当然，浏览器实现留下了一个推测性的理论位置。这可能会导致布局问题和错误。

虽然表格用于布局 - 有时仍然是 - 我想大多数浏览器都会正确呈现内容。甚至是 IE。

【讨论】：

我怀疑浏览器实现是我的“等等，这是个坏主意”。

【参考方案5】：

如果要使用位置：绝对；在 td 上使用 position: relative; 的 div 上，您会遇到问题。 FF、safari 和 chrome（虽然是 mac，但不是 PC）不会将 div 相对于 td 定位（如您所料）这对于带有display: table-whatever; 的 div 也是如此，因此如果您想这样做，您需要两个 div，一个用于容器 width: 100%; height: 100%; 并且没有边框，因此它填充 td 而没有任何视觉影响。然后是绝对的。

除此之外，为什么不直接拆分单元格？

【讨论】：

唯一实用的、非圣战的答案

【参考方案6】：

我通过在<td> 中放置<div> 来解决这个问题。

如果我将它放在 td 中，我无法使用 document.getElementById() 识别 div。但在外面，它工作得很好。

【参考方案7】：

正如大家所提到的，出于布局目的，这可能不是一个好主意。我来到这个问题是因为我想知道同样的问题，我只想知道它是否是有效的代码。

由于它有效，您可以将其用于其他目的。例如，我将使用它来在表格行中放置一些花哨的“CSSed” div，然后使用快速 jQuery 函数允许用户按价格、名称等对信息进行排序。这样，只有布局表会给我“垂直顺序”，但我将通过 CSS 控制 div 的宽度、高度、背景等。

【参考方案8】：

两种处理方式

将div放入tbody标签内 将div放入tr标签内

这两种方法都有效，如果您看到 feference：https://***.com/a/23440419/2305243

【参考方案9】：

它打破了semantics，仅此而已。它工作得很好，但是如果你“破坏语义”，可能会有屏幕阅读器或其他东西不会喜欢处理你的 HTML。

【讨论】：

@Greg，为什么它会破坏语义？ div 只是页面内容的块级划分或细分。因此，将它们放在表格单元格中并不是本质上且不可撤销的反语义。

我试图给你写几个回复来证明我的回答是正确的，但我一直在归结为个人意见。 :/ 我想我最好的回答是你的单元格中的任何内容都可以用另一个 HTML 标记更好地表示。如果您真正将单元格划分为组件，那么您可能不应该使用表格开始，您应该为您的布局设置一系列 DIV 样式。不知道为什么我不能用更好的词来表达......我想应该归咎于恕我直言。

嗯，你的意思是 TD 在语义上和 DIV 是一样的，为什么要连续两个呢？

@jcollum：不，我不会说它们在语义上是相同的。 TD 绝对是表格中的一个单元格；它是已知结构的一部分：表格有行，行有单元格，单元格包含数据。 DIV 只是一个容器......它可以随时随地表示文档中的任何内容 - 您必须对其应用样式才能根据标记中的目的从中获取任何语义。

DIV 在语义上没有意义，所以我看不出它怎么可能是不正确的。