Question

请看这个例子：

我希望红色边框底部显示为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 Fiddle demo

你可以看到各种边框是如何相交的，因为像素不能被细分，这导致角像素与其中一个边是相同的纯色，因此是不同的颜色，如果颜色不同，则连接到其他侧。

要补偿你真正拥有的唯一选择是在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

表边框重叠

1 个答案: