CSS 为什么 <th> 和 <thead> 的边框都没有显示在这里？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2788824/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why border of <th> and <thead> both not showing here?
提问by Jitendra Vyas
Why both border not showing?
为什么两个边框都不显示？
<table>
<thead style="border-top:10px solid red; background:yellow">
<tr><th style="border-top:10px solid green">Name</th></tr>
</thead>
<tbody>
<tr><td>Bob</td></tr>
<tr><td>Tom</td></tr>
</tbody>
</table>
回答by ANeves
It's the expected behaviour. Odd, but expected.
The borders are collapsing, and the thicker one prevails.
这是预期的行为。奇怪，但在意料之中。
边界正在崩溃，而较粗的占上风。
You can see it with this example: the touching borders on first row collapse, the ones on the second row don't.
On the first row the first cell gets the thicker border (10px green > 5px red), and the second cell gets the thicker border (5px red > 3px green).
On the second row there are no "adjoining" borders to collapse, so the 10px green and 3px green borders show up normally.
你可以通过这个例子看到它：第一行的触摸边框折叠，第二行的边框没有。
在第一行，第一个单元格的边框较粗（10px 绿色 > 5px 红色），第二个单元格的边框较粗（5px 红色 > 3px 绿色）。
在第二行没有要折叠的“相邻”边框，因此 10px 绿色和 3px 绿色边框正常显示。
<table>
<thead style="border-top:5px solid red; background:yellow">
<tr>
<th style="border-top:10px solid green">Name</th>
<th style="border-top:3px solid green">Name</th>
</tr>
<tr>
<th style="border-top:10px solid green">Name</th>
<th style="border-top:3px solid green">Name</th>
</tr>
</thead>
</table>
Need me to clear up the explanation anyhow?
还需要我澄清解释吗？
PS: theoretically you could use the border-collapseproperty on the table to prevent that, but I'm not managing.
Also, the default value seems to be not to collapse.
PS：理论上你可以使用桌子上的边框折叠属性来防止这种情况，但我没有管理。
此外，默认值似乎是不折叠。
Further reading: http://www.w3.org/TR/CSS2/tables.html#borders
回答by Nick Craver
You can use the <thead>element as the selector like this:
您可以<thead>像这样使用元素作为选择器：
thead { background: red; }
回答by Kasturi
Give a class name to your table. And style it as below
为您的表指定一个类名。并将其样式如下
<style>
.mytable thead{
//your style goes here
}
</style>
EDIT:
编辑：
<table>
<thead style="border-top:10px solid red; background:yellow">
<tr><th style="border-left:10px solid green">Name</th></tr>
</thead>
<tbody>
<tr><td>Bob</td></tr>
<tr><td>Tom</td></tr>
</tbody>
</table>
Try this code. The border of thead and th are being shown. May be th has a greater precedence when there is a same style attribute conflict between th and thead
试试这个代码。正在显示 thead 和 th 的边界。th 和 thead 之间存在相同的样式属性冲突时，可能 th 具有更高的优先级
