如何在 tr 上有一个连续的边框底部，并将边框间距设置为分离

Question

我需要表格具有具有连续底部边框的行，但表格单元格的背景应介于两者之间具有垂直空白。

问题是，我不能在设置边框间距的同时拥有跨越整行的边框。如何关闭边框但保留白色间隙？

这是我的标记：

<table>
  <thead>
    <tr>
      <th>Lorem ipsum</th>
      <th>Lorem ipsum</th>
      <th>Lorem ipsum</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</td>
      <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</td>
      <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</td>
      <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</td>
      <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</td>
      <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</td>
      <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</td>
    </tr>
  </tbody>
</table>

我的 CSS 定义了以下样式：

table {
  border-collapse: separate;
  border-spacing: 1.5rem 0;
  tr {
    border-bottom: 1px solid #dcdcdc; // This is what I need
  }
  td {
    padding: 1.5rem;
    background-color: #fafafa;
    border-bottom: 1px solid #dcdcdc; // Or this...
  }
}

Answer 1

您可以使用:before伪元素：

table {
  border-collapse: separate;
  border-spacing: 1.5rem 0;
  td {
    padding: 1.5rem;
    background-color: #fafafa;
    border-bottom: 1px solid #dcdcdc; 
    position: relative;
    &:not(:first-child):before {
      content: '';
      height: 1px; 
      width: 25px;
      background: #dcdcdc;
      display: block;
      position: absolute;
        left: -25px;
        bottom: -1px;
    }
  }
}

演示