Css 如何在边界间距设置为“分离”的tr上具有连续的边界底部？

我需要一个表具有连续下边框的行，但是表单元格应该有一个背景，中间有一个垂直的空白

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

这是我的标记：

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

您可以使用：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;
    }
  }
}

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