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>

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

编辑：我知道这是默认行为而不是错误，根据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>

我不知道如何仅使用边框来实现此目的。

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

1 个答案: