Html TD 内的 DIV 是个坏主意吗？

Is a DIV inside a TD a bad idea?

提问by jcollum

It seems like I heard/read somewhere that a <div>inside of a <td>was a no-no. Not that it won't work, just something about them not being really compatible based on their display type. Can't find any evidence to back up my hunch, so I may be totally wrong.

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

回答by Guffa

Using a divinstide a tdis not worse than any other way of using tables for layout. (Some people never use tables for layout though, and I happen to be one of them.)

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

If you use a divin a tdyou will however get in a situation where it might be hard to predict how the elements will be sized. The default for a div is to determine its width from its parent, and the default for a table cell is to determine its size depending on the size of its content.

但是，如果您div在 a 中使用 a ，td则会遇到可能难以预测元素大小的情况。div 的默认值是根据其父级确定其宽度，表格单元格的默认值是根据其内容的大小来确定其大小。

The rules for how a divshould be sized is well defined in the standards, but the rules for how a tdshould be sized is not as well defined, so different browsers use slightly different algorithms.

a 的div大小规则在标准中有很好的定义，但是 a 的td大小规则没有那么明确，因此不同的浏览器使用略有不同的算法。

回答by Martin Liversage

After checking the XHTML DTDI discovered that a <TD>-element is allowed to contain block elements like headings, lists and also <DIV>-elements. Thus, using a <DIV>-element inside a <TD>-element does not violate the XHTML standard. I'm pretty sure that other modern variations of HTML have an equivalent content model for the <TD>-element.

在检查XHTML DTD 之后，我发现 <TD> 元素允许包含块元素，如标题、列表和 <DIV> 元素。因此，在 <TD> 元素中使用 <DIV> 元素不会违反 XHTML 标准。我很确定 HTML 的其他现代变体对 <TD> 元素具有等效的内容模型。

Here are the relevant DTD rules:

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

回答by Sampson

No. Not necessarily.

不，不一定。

If you need to place a DIV within a TD, be sure you're using the TD properly. If you don't care about tabular-data, and semantics, then you ultimately won't care about DIVs in TDs. I don't think there's a problem though - if you haveto do it, you're fine.

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

According to the HTML Specification

根据 HTML 规范

A <div>can be placed where flow contentis expected¹, which is the <td>content model².

A<div>可以放置在预期流内容^{1 的位置}，即<td>内容模型²。

回答by David says reinstate Monica

A table-cell can legitimately contain block-level elements so it's not, inherently, a faux-pas. Browser implentation, of course, leaves this a speculative-theoretical position. It may cause layout problems and bugs.

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

Though as tables were used for layout -and sometimes still are- I imagine that most browsers will render the content properly. Even IE.

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

回答by zeel

If you want to use position: absolute; on the div with position: relative;on the td you will run into issues. FF, safari, and chrome (mac, not PC though) will not position the div relative to the td (like you would expect) this is also true for divs with display: table-whatever;so if you want to do that you need two divs, one for the container width: 100%;height: 100%;and no border so it fills the td without any visual impact. and then the absolute one.

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

other than that why not just split the cell?

除此之外，为什么不只是拆分单元格？

回答by Himaja

I have faced the problem by placing a <div>inside <td>.

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

I was unable to identify the div using document.getElementById()if i place that inside td. But outside, it was working fine.

document.getElementById()如果我将它放在 td 中，我将无法识别使用的 div 。但在外面，它运行良好。

回答by Juan Ignacio

As everyone mentioned, it might not be a good idea for layout purposes. I arrived to this question because I was wondering the same and I only wanted to know if it would be valid code.

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

Since it's valid, you can use it for other purposes. For example, what I'm going to use it for is to put some fancy "CSSed" divs inside table rows and then use a quick jQuery function to allow the user to sort the information by price, name, etc. This way, the only layout table will give me is the "vertical order", but I'll control width, height, background, etc of the divs by CSS.

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

回答by Alan Dong

Two ways of dealing with it

两种处理方式

1. put divinside tbodytag
2. put divinside trtag

1. 把div里面tbody的标签
2. 把div里面tr的标签

Both approaches are valid, if you see feference: https://stackoverflow.com/a/23440419/2305243

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

回答by Greg

It breaks semantics, that's all. It works fine, but there may be screen readers or something down the road that won't enjoy processing your HTML if you "break semantics".

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