Question

为什么两个边框都没有显示？

<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绿色＆gt; 5px红色），第二个单元格获得较厚的边框（5px红色＆gt; 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

Answer 2

您可以使用<thead>元素作为选择器，如下所示：

thead { background: red; }

You can see an example here

Answer 3

为您的表提供类名。并将其设置如下

<style>
.mytable thead{
//your style goes here
}


</style>

编辑：

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

试试这段代码。正在展示thead和th的边界。当th和thead之间存在相同的样式属性冲突时，可能会有更高的优先级

为什么边界和两个都不显示在这里？

3 个答案: