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.
好像我在什么地方听说过
9 个解决方案
#1
133
Using a div instide a td 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.)
使用div教唆td并不比使用表进行布局更糟糕。(有些人从来不使用表格进行布局，而我恰好就是其中之一。)
If you use a div in a td 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.
如果您在td中使用div，那么您将会遇到这样的情况:很难预测元素的大小。div的默认值是决定它与父元素的宽度，而表单元格的默认值是根据内容的大小来决定它的大小。
The rules for how a div should be sized is well defined in the standards, but the rules for how a td should be sized is not as well defined, so different browsers use slightly different algorithms.
在标准中定义了关于div应该如何设置大小的规则，但是td应该如何设置大小的规则没有很好的定义，所以不同的浏览器使用的算法略有不同。
#2
64
After checking the XHTML DTD I 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之后，我发现一个-元素被允许包含块元素，如标题、列表和
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">
#3
36
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 have to do it, you're fine.
如果需要在TD中放置一个DIV，请确保正确使用了TD。如果您不关心表数据和语义，那么您最终将不会关心TDs中的div。我不认为有什么问题——如果你必须这么做，你就没事了。
According to the HTML Specification
根据HTML规范
A <div> can be placed where flow content is expected1, which is the <td> content model2.
可以将
#4
14
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.
表单元格可以合理地包含块级元素，因此从本质上讲，它不是一个伪造的。当然，浏览器的需求使这成为一个投机理论的立场。它可能导致布局问题和bug。
Though as tables were used for layout -and sometimes still are- I imagine that most browsers will render the content properly. Even IE.
虽然表被用于布局(有时仍然如此)，但我认为大多数浏览器会正确地呈现内容。甚至IE。
#5
13
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.
如果你想使用位置:绝对;在div上，位置:相对;在td上你会遇到问题。FF、safari和chrome (mac，而不是PC)不会将div相对于td(正如您所期望的)进行定位，这也适用于带显示的div: table-whatever;如果你想这样做，你需要两个div，一个表示容器宽度:100%;高度:100%;没有边界，所以它填满了td，没有任何视觉冲击。然后是绝对的。
other than that why not just split the cell?
除此之外，为什么不把细胞分裂呢?
#6
2
I have faced the problem by placing a <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.
如果我把它放在td内，我就不能使用document.getElementById()来识别div。但在外面，一切都很顺利。
#7
1
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.
由于它是有效的，您可以将它用于其他目的。例如,我要用它来是把一些花哨的“cs”div内表的行,然后使用一个快速jQuery函数允许用户对其排序的信息价格,名称,等等。这样,唯一的布局表会给我“垂直秩序”,但我会控制宽度,高度,背景等的div CSS。
#8
0
Two ways of dealing with it
有两种处理方法。
- put
divinsidetbodytag - 把div放到tbody标签里面
- put
divinsidetrtag - 把div放在tr标签内
Both approaches are valid, if you see feference: https://*.com/a/23440419/2305243
如果您看到feference: https://*.com/a/23440419/2305243，那么这两种方法都是有效的
#9
-4
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。
#1
133
Using a div instide a td 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.)
使用div教唆td并不比使用表进行布局更糟糕。(有些人从来不使用表格进行布局，而我恰好就是其中之一。)
If you use a div in a td 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.
如果您在td中使用div，那么您将会遇到这样的情况:很难预测元素的大小。div的默认值是决定它与父元素的宽度，而表单元格的默认值是根据内容的大小来决定它的大小。
The rules for how a div should be sized is well defined in the standards, but the rules for how a td should be sized is not as well defined, so different browsers use slightly different algorithms.
在标准中定义了关于div应该如何设置大小的规则，但是td应该如何设置大小的规则没有很好的定义，所以不同的浏览器使用的算法略有不同。
#2
64
After checking the XHTML DTD I 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之后，我发现一个-元素被允许包含块元素，如标题、列表和
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">
#3
36
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 have to do it, you're fine.
如果需要在TD中放置一个DIV，请确保正确使用了TD。如果您不关心表数据和语义，那么您最终将不会关心TDs中的div。我不认为有什么问题——如果你必须这么做，你就没事了。
According to the HTML Specification
根据HTML规范
A <div> can be placed where flow content is expected1, which is the <td> content model2.
可以将
#4
14
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.
表单元格可以合理地包含块级元素，因此从本质上讲，它不是一个伪造的。当然，浏览器的需求使这成为一个投机理论的立场。它可能导致布局问题和bug。
Though as tables were used for layout -and sometimes still are- I imagine that most browsers will render the content properly. Even IE.
虽然表被用于布局(有时仍然如此)，但我认为大多数浏览器会正确地呈现内容。甚至IE。
#5
13
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.
如果你想使用位置:绝对;在div上，位置:相对;在td上你会遇到问题。FF、safari和chrome (mac，而不是PC)不会将div相对于td(正如您所期望的)进行定位，这也适用于带显示的div: table-whatever;如果你想这样做，你需要两个div，一个表示容器宽度:100%;高度:100%;没有边界，所以它填满了td，没有任何视觉冲击。然后是绝对的。
other than that why not just split the cell?
除此之外，为什么不把细胞分裂呢?
#6
2
I have faced the problem by placing a <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.
如果我把它放在td内，我就不能使用document.getElementById()来识别div。但在外面，一切都很顺利。
#7
1
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.
由于它是有效的，您可以将它用于其他目的。例如,我要用它来是把一些花哨的“cs”div内表的行,然后使用一个快速jQuery函数允许用户对其排序的信息价格,名称,等等。这样,唯一的布局表会给我“垂直秩序”,但我会控制宽度,高度,背景等的div CSS。
#8
0
Two ways of dealing with it
有两种处理方法。
- put
divinsidetbodytag - 把div放到tbody标签里面
- put
divinsidetrtag - 把div放在tr标签内
Both approaches are valid, if you see feference: https://*.com/a/23440419/2305243
如果您看到feference: https://*.com/a/23440419/2305243，那么这两种方法都是有效的
#9
-4
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。