Table 边框折叠 - 右边框溢出底部

Question

问题很简单：如何让橙色底边越过蓝色底边，而不是底边？

* {
  box-sizing: border-box;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td {
  border-right: 6px solid blue;
  border-bottom: 6px solid orange;
}

<table>
    <tr><td>aaa</td><td>aaa</td></tr>
    <tr><td>aaa</td><td>aaa</td></tr>
</table>

我在下面的回答中有一个可能的解决方案，但它相当老套，我很好奇是否有更漂亮的解决方案？

编辑：我知道这是默认行为而不是错误，根据 this answer，我只是想覆盖它。

Answer 1

我们提出的解决方案是使用 :after 伪元素而不是边框。它有效，但并不像我们希望的那样漂亮：

* {
  box-sizing: border-box;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td:after {
  content: '[=10=]a0';
  background: orange;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  display: inline-block;
}

td {
  position: relative;
  background: white;
  padding-right: 6px;
  
  border-bottom: 6px solid blue;
}

<table>
    <tr><td>aaa</td><td>aaa</td></tr>
    <tr><td>aaa</td><td>aaa</td></tr>
</table>

我不知道如何只用边框实现这个。

Table 边框折叠 - 右边框溢出底部

Table with borders collapsed - right border overflows bottom

html

css

border

css-tables