把 DIV 放在 TD 里面是个坏主意吗？

我好像在哪里听说过 <td>里面的 <div>是个禁忌。不是说它不能工作，只是它们根据显示类型不能真正兼容。找不到任何证据来支持我的直觉，所以我可能完全错了。

176523 次浏览
小开

不，不一定。

如果需要在 TD 中放置 DIV，请确保正确使用 TD。如果您不关心表格数据和语义，那么最终就不会关心 TD 中的 DIV。我不认为这是一个问题，但-如果你 有做到这一点，你很好。

根据 HTML 规范

<div>可以放置在 流量含量预期的位置 < a href = “ https://www.w3.org/TR/html5/group-content.html # the-div-element”rel = “ norefrer”> 1 ，即 <td>内容模型 < a href = “ https://www.w3.org/TR/html5/tabular-data.html # the-td-element”rel = “ noReferrer”> 2 。

小开

表单元格可以合法地包含块级别的元素，所以本质上不会出错。当然，浏览器的实现使这成为一种推测性的理论立场。它可能会导致布局问题和 bug。

虽然表被用于布局-有时仍然是-我想大多数浏览器将呈现正确的内容。即使是 IE。

小开

它打破了 语义学，就是这样。它工作得很好，但是如果你“破坏语义”，可能会出现屏幕阅读器或者其他不喜欢处理 HTML 的东西。

小开

在检查了 XHTML DTD之后，我发现 < TD >-element 允许包含诸如标题、列表和 < DIV >-element 之类的块元素。因此，在 < TD >-元素中使用 < DIV >-元素并不违反 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">
小开
最佳答案

在 td中使用 div并不比其他使用表进行布局的方法差。(不过，有些人从不使用表格进行布局，我就是其中之一。)

如果你在 td中使用 div，你会遇到一种情况，那就是很难预测元素的大小。Div 的默认值是从其父级确定其宽度，而表单元格的默认值是根据其内容的大小确定其大小。

关于 div应该如何调整大小的规则在标准中有很好的定义，但是关于 td应该如何调整大小的规则没有很好的定义，所以不同的浏览器使用略有不同的算法。

小开

如果您想在 div 上使用 position: final; ，在 td 上使用 position: relative;，则会遇到问题。FF，safari 和 chrome (mac，不是 PC)不会将 div 放置在相对于 td 的位置(就像你期望的那样) ，这对于使用 display: table-whatever;的 div 也是如此，所以如果你想这样做，你需要两个 div，一个用于容器 width: 100%; height: 100%;，没有边框，所以它填充 td 而没有任何视觉冲击。然后是绝对的。

除此之外，为什么不把细胞分开呢？

小开

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

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

小开

我已经面对的问题，把一个 <div>内的 <td>。

如果我把它放在 td 中，我就无法用 document.getElementById()来识别 div。但在外面，一切正常。

小开

有两种解决方法

  1. 将 div放在 tbody标签内
  2. 将 div放在 tr标签内

这两种方法都是有效的，如果您看到 ference: https://stackoverflow.com/a/23440419/2305243


提交答案