html - 在行下方添加空格和边框

Question

我有一个表格，我需要下面有空格和边框的行。

像这样:

我试图用错误的白色边框和黑色背景的“间隔行”来修复它，但我没有正确显示。

table {
  border-collapse:collapse;  
}
td {
  padding:1em 2em;
  background-color:#ccc; 
  border-top:10px solid white;
  border-bottom:10px solid white;
  border-right:4px solid white;
  text-align:center;
  vertical-align:middle;
}
tr:first-child td {border-top:0}
td:last-child {border-right:0}

tr.spacer {
  height:1px;
  background-color:black;
  border:1px solid black;
}

<table>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
    <td>Four</td>
  </tr>
  <tr class="spacer"></tr>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
    <td>Four</td>
  </tr>
  <tr class="spacer"></tr>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
    <td>Four</td>
  </tr>
</table>
  

有什么想法吗？

Answer 1

尝试使用 :after添加一些虚拟内容并对齐它:

td:after {
   content: 'border';
    position: absolute;
    bottom: -5px;
    background: red;
    width: 105%;
    left: 0px;
    text-indent:-9999px;
    height:1px;
}

您需要制作 <td>的 position:relative .

查看 - https://jsfiddle.net/2j6jqkx2/1/