css - 如何在边框间距设置为单独的 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;
    }
  }
}

DEMO