为什么<th>和<thead>的边界都没有显示在这里？

Question

为什么两个边界都不显示？

http://jsfiddle.net/r8mA7/

<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>

Answer 1

这是预期的行为.奇怪,但预计.
边界正在崩溃,而较厚的边界占优势.

您可以通过此示例看到它:第一行的触摸边框折叠,第二行的触摸边框不折叠.
在第一行,第一个单元格获得较厚的边框(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>

无论如何,需要我解释一下这个解释吗？

PS:理论上你可以使用表格上的border-collapse属性来防止这种情况,但我不管理.
此外,默认值似乎不会崩溃.

进一步阅读:http://www.w3.org/TR/CSS2/tables.html#borders