css - 如何给表格单元格边框的 Angular 上/下边框而不是左/右边框的颜色

Question

有没有一种方法可以影响渲染的 div(或者在我的例子中是 th)的 Angular 像素的颜色，当 Angular 的两个相邻边有不同的颜色？

在我看来，无论我将什么标记为重要， Angular 落总是获得侧面的颜色。但我想为 Angular 像素使用 border-top 颜色。

就像下面的例子一样，给第一行一个连续的黑色边框，用难看的红色分隔单元格，表格的其余部分简单地用灰色。

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

您可以使用伪元素获取它们，这将是整个行+边框的大小。然后仅重新应用顶部和底部边框。

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>