blocks|key|1292641|text|表格单元格可以合法地包含块级元素，因此它本身就不是一个冒牌货。当然，浏览器实现使这一点处于一种推测-理论的位置。它可能会导致布局问题和错误。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1292642|虽然表格是用来布局的，但-and有时仍然是这样--我想大多数浏览器都能正确地呈现内容。甚至IE也是如此。|1292643|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

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.

blocks|key|1292684|text|它破坏了semantics，仅此而已。它工作得很好，但如果你“破坏语义”，可能会有屏幕阅读器或其他东西不喜欢处理你的HTML。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1292685|entityMap|0|LINK|mutability|MUTABLE|url|http://en.wikipedia.org/wiki/HTML#Semantic_HTML^0|4|9|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

It breaks <a href="http://en.wikipedia.org/wiki/HTML#Semantic_HTML" rel="nofollow noreferrer">semantics</a>, 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".

blocks|key|1292717|text|检查XHTML+DTD后，我发现-element允许包含块元素，如标题、列表和-elements。因此，在-element中使用-element并不违反XHTML标准。我敢肯定，其他现代版本的超文本标记语言也有与-element相同的内容模型。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1292718|以下是相关的DTD规则：|1292719|<!ELEMENT+td+%25Flow;>

<!ENTITY+%25Flow+"(#PCDATA+%7C+%25block;+%7C+form+%7C+%25inline;+%7C+%25misc;>
<!ENTITY+%25block+"p+%7C+%25heading;+%7C+div+%7C+%25lists;+%7C+%25blocktext;+%7C+fieldset+%7C+table">|code-block|syntax|javascript|1292720|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/xhtml1/dtds.html^0|2|9|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

After checking the <a href="http://www.w3.org/TR/xhtml1/dtds.html" rel="noreferrer">XHTML DTD</a> I discovered that a &lt;TD&gt;-element is allowed to contain block elements like headings, lists and also &lt;DIV&gt;-elements. Thus, using a &lt;DIV&gt;-element inside a &lt;TD&gt;-element does not violate the XHTML standard. I'm pretty sure that other modern variations of HTML have an equivalent content model for the &lt;TD&gt;-element.

Here are the relevant DTD rules:

<pre><code>&lt;!ELEMENT td %Flow;&gt;
&lt;!-- %Flow; mixes block and inline and is used for list items etc. --&gt;
&lt;!ENTITY %Flow "(#PCDATA | %block; | form | %inline; | %misc;&gt;
&lt;!ENTITY %block "p | %heading; | div | %lists; | %blocktext; | fieldset | table"&gt;
</code></pre>

blocks|key|1292770|text|使用div+instide+td并不比使用表格进行布局的任何其他方式更差。(有些人从不使用表格进行布局，我碰巧就是其中之一。)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1292771|但是，如果在td中使用div，则可能很难预测元素的大小。div的默认设置是根据其父元素确定其宽度，表格单元格的默认设置是根据其内容的大小确定其大小。|1292772|标准中很好地定义了如何调整div大小的规则，但是没有很好地定义td大小的规则，因此不同的浏览器使用略有不同的算法。|1292773|entityMap^0|2|3|E|2|0|6|2|B|3|0|D|3|V|2|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|V|8|@$9|W|A|X|B|C]|$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|J|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|K|$]]

Using a <code>div</code> instide a <code>td</code> is 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.)

If you use a <code>div</code> in a <code>td</code> you 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.

The rules for how a <code>div</code> should be sized is well defined in the standards, but the rules for how a <code>td</code> should be sized is not as well defined, so different browsers use slightly different algorithms.

blocks|key|1507409|text|如果你想在分区上使用position:+absolute；，在td上使用position:+relative;，你会遇到问题。safari和chrome+(mac，而不是PC+)不会相对于td定位div+(正如你所期望的)，这对于display:+table-whatever;的div也是如此，所以如果你想这样做，你需要两个div，一个用于容器width:+100%25;+height:+100%25;，没有边框，所以它填充td而不会产生任何视觉上的影响。然后是绝对的。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1507410|除此之外，为什么不直接拆分细胞呢？|1507411|entityMap^0|10|J|37|O|4T|C|56|D|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]|$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|I|$]]

If you want to use position: absolute; on the div with <code>position: relative;</code> 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 <code>display: table-whatever;</code> so if you want to do that you need two divs, one for the container <code>width: 100%;</code> <code>height: 100%;</code> and no border so it fills the td without any visual impact. and then the absolute one. 

other than that why not just split the cell?

blocks|key|1292936|text|正如每个人都提到的，对于布局而言，这可能不是一个好主意。我提出这个问题是因为我也想知道它是否是有效的代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1292937|由于它是有效的，您可以将其用于其他目的。例如，我将使用它的目的是在表行中放置一些花哨的"CSSed“div，然后使用一个快速的jQuery函数来允许用户按价格、名称等对信息进行排序。这样，唯一的布局表格将提供”垂直顺序“，但我将通过CSS控制div的宽度、高度、背景等。|1292938|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

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.

blocks|key|1507529|text|我通过在<td>中放置一个<div>来解决这个问题。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1507530|如果我把它放在td里面，我就不能用document.getElementById()识别div了。但在外面，它运行得很好。|1507531|entityMap^0|4|4|D|5|0|H|P|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|R|8|@]|D|@]|E|$]]]|I|$]]

I have faced the problem by placing a <code>&lt;div&gt;</code> inside <code>&lt;td&gt;</code>.

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

It seems like I heard/read somewhere that a <code>&lt;div&gt;</code> inside of a <code>&lt;td&gt;</code> 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.

Is a DIV inside a TD a bad idea?

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

问在TD中使用DIV是个坏主意吗？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在TD中使用DIV是个坏主意吗？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在TD中使用DIV是个坏主意吗？
EN