在行下方添加空格和边框

Question

我有一张桌子，我需要下面有空格和边框的行。

像这样：

我试图用假白色边框和一个＆＃39;间隔行＆＃39;来修复它。黑色背景，但我没有正确显示。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>
  

＆＃13;

＆＃13;

＆＃13;

有什么想法吗？

Answer 1

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

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

您需要制作<td>＆＃39; position:relative。

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

Answer 2

快速修复，试试......

tr{
padding-bottom: 10px;
margin-bottom:10px;
border-bottom: 1px solid grey;
float: left;}

哦，摆脱tr间隔元素。

Answer 3

我通过将背景表颜色作为边框来完成。 ＆＃39; row spacer＆＃39;高度与假边框加1px相同。

＆＃13;

＆＃13;

table {
  border-collapse:collapse; 
  background-color:black
}
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:11px;  
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;