表格单元格的垂直和水平边框具有不同 colors 时的问题

Question

假设我有一个表格，其中列通过使用左侧白色边框相互分隔：

td, th {
  &:not(:first-child) {
    border-left: 10px solid #fff;
    font-family: monospace;
  }
}

它看起来如下：

看起来很不错。 现在我需要使用黑线将所有行与摘要行分开：

tbody {
  tr {
    &:last-child {
      background: #EAF0F6;
      border-top: 1px solid #000;
    }
  }
}

我得到以下图片：

分隔边界变成虚线，如何解决？

http://jsfiddle.net/m1a530td/40/

Answer 1

您可以使用带有内部box-shadow而不是边框的填充来获得列之间的空白空间和没有间隙的边框（演示）：

td, th {
  &:not(:first-child) {
    padding-left: calc(10px + 1em);
    -webkit-box-shadow: inset 10px 0px 0px 0px rgba(255,255,255,1);
    -moz-box-shadow: inset 10px 0px 0px 0px rgba(255,255,255,1);
    box-shadow: inset 10px 0px 0px 0px rgba(255,255,255,1);
    font-family: monospace;
  }
}