html - 边框折叠的表格 - 右边框溢出底部

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: '\00a0';
  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>

我不知道如何仅通过边框来实现这一点。