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

如何在tr上设置连续的边框底部，边框间距设置为单独？

1 个答案: