表边框重叠

Question

请参阅此示例：

http://jsfiddle.net/qtjdx/

我希望红色边界底显示为1条实线，但是现在黄色边框将其分为3。有什么方法可以使边界底优先？像z索引吗？

我尝试了边界爆发：崩溃和边界崩溃：独立。

唯一有效的是，如果我使红线更厚，但是我希望它具有相同的宽度。

table { 
  width:100%;
  border:1px solid blue;
  border-collapse:separate;
}
th, td {
  border:1px solid yellow;
  padding:5px;
}
th {
  background:black;
  color:white;
}
th {
  border-bottom:1px solid red !important;
} 
td {
  background:#efefef;
}

Answer 1

您遇到的问题是因为边框由四个单独的侧面组成，它们在拐角处以45度角相交，以各种方式绕过。因此，让底部的边界与侧面的颜色不同，始终会导致边界破裂。

如果您查看此演示：

div {
    float: left;
    border-width: 25px;
    border-style: solid;
    border-top-color: red;
    border-right-color: green;
    border-bottom-color: blue;
    border-left-color: yellow;
}

Js小提琴演示。

您可以看到各个边界如何相遇，因为不能细分一个像素会导致角像素与侧面之一的固体色素相同，因此A 不同的颜色，如果颜色不同，则与与之连接的其他侧面。

补偿您真正真正拥有的唯一选择是在th中使用嵌套元素：

<table cellpadding="0" cellspacing="0">
    <thead>
        <tr>
            <th><div>col 1</div></th>
            <th><div>col 2</div></th>
            <th><div>col 3</div></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>

使用以下CSS：

table { 
    width:100%;
    border:1px solid blue;
    border-collapse:collapse;
}
th {
    border-bottom: 2px solid yellow;
}
th div, td {
    border: 1px solid red;
}
th div {
    border-bottom-width: 0;
}

JS小提琴演示。