如何给表格单元格边框的顶部/底部边框的颜色而不是左/右边框的颜色

Question

有没有办法影响呈现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边界根本没有显示出来，并且弄乱了表格的其余部分（尽管这可能是固定的）。

Answer 1

您可以通过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>