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

Answer 1

您遇到的问题是因为边框由四个独立的边组成，它们在拐 Angular 处以 45 度 Angular 相交，并以各种方式变圆。因此，底部边框的颜色与侧面的颜色不同将总是导致边框断开。

如果你看这个演示:

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 Fiddle demo .

您可以看到各种边界是如何相交的，因为像素不能被分割，这导致 Angular 像素与其中一个边具有相同的纯色，因此颜色不同，如果颜色不同，到它连接的另一侧。

为了补偿，您真正拥有的唯一选择是在 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 Fiddle demo .