html - 表格边框重叠

Question

请看这个例子：

http://jsfiddle.net/qTjdX/

我希望红色边框底部显示为 1 条实线，但现在黄色边框将其分成 3 条。有没有办法让边框底部优先？像各种z-index？

我已经尝试过border-collapse:collapse 和border-collapse:separate。

唯一有效的是如果我让红线变粗，但我希望它具有相同的宽度。

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

​</p>

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 小提琴演示。

您可以看到各种边界是如何相交的，因为无法细分像素，这导致角像素与一侧的纯色相同，因此如果颜色不同，则另一侧的颜色不同它与之相连。

为了补偿您真正拥有的唯一选择是在 : 中使用嵌套元素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 小提琴演示。