表邊框重疊

Question

請看這個例子：

http://jsfiddle.net/qTjdX/

我希望紅色邊框底部顯示為1實線，但是現在黃色邊框將其拆分為3.有沒有辦法讓border-bottom優先？ 像z-index的種類？

我試過邊界崩潰：崩潰和邊界崩潰：分開。

唯一有效的方法是如果我將紅線做得更粗，但我希望它具有相同的寬度。

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

你可以看到各種邊框是如何相遇的，因為像素不能被細分，這導致角像素與其中一個邊是相同的純色，因此如果顏色不同，則為另一邊的不同顏色與之相連。

要補償你真正擁有的唯一選擇是在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小提琴演示 。