如何给表格单元格边框的顶部/底部边框的颜色而不是左/右边框的颜色
问题描述:
有没有办法影响呈现div
(或在我的情况下为th
)的角落像素是什么颜色,当角落的两个相邻边有不同的颜色?如何给表格单元格边框的顶部/底部边框的颜色而不是左/右边框的颜色
在我看来,无论我重要的标记是什么,角落总是会获得一面的颜色。但是我想用拐角像素的边框顶部颜色。
在下面的例子中给第一行一个连续的黑色边框,并用丑陋的红色和表格的其余部分将单元格分隔为简单的灰色。
table {
border-collapse: collapse;
text-align: center;
}
table tr td {
border: 8px solid grey;
}
table tr:first-child {
border: 8px solid black;
}
table tr th:not(:last-child) {
border-right: 8px solid red;
}
table tr:not(:first-child) td {
border-top: 0;
}
I want:
<table>
<tr>
<th> black-bordered </th>
<th> row </th>
<th> separated </th>
<th> with </th>
<th> reds </th>
</tr>
<tr>
<td> everything </td>
<td> below </td>
<td> it </td>
<td> simply </td>
<td> grey </td>
</tr>
</table>
我也试图删除border-collapse
,给边界到tr
元素和侧边框的th
S和设置border-spacing
(我刚发现)为零。但tr
边界根本没有显示出来,并且弄乱了表格的其余部分(尽管这可能是固定的)。
答
您可以通过pseudo element
获取它们,这将是整个row + borders
的大小。然后只重新应用顶部和底部边框。
table {
border-collapse: collapse;
text-align: center;
}
table tr td {
border: 8px solid grey;
border-top: none;
}
table tr:first-child {
border: 8px solid black;
}
table tr th:not(:last-child) {
border-right: 8px solid red;
}
table tr th {
position: relative;
}
table tr th::before {
content: "";
position: absolute;
top: -8px; left: -8px;
width: calc(100% + 16px); height: 100%;
border-width: 8px 0;
border-color: black transparent;
border-style: solid;
}
I want:
<table>
<tr>
<th> black-bordered </th>
<th> row </th>
<th> separated </th>
<th> with </th>
<th> reds </th>
</tr>
<tr>
<td> everything </td>
<td> below </td>
<td> it </td>
<td> simply </td>
<td> grey </td>
</tr>
</table>
尚不清楚你想要什么。你想要顶部和侧面的边界是他们自己的颜色,然后他们连接到另一种颜色?也许显示你想要的图像。 – Slime
不需要。我想让“他们连接的地方”处于顶部边框颜色。 – kub1x
如果将单元格中的“display”类型更改为“inline-block”,则边框颜色会正确重叠。 – Slime