html - css网格如何在行之间添加线？

Question

我正在使用 CSS 网格制作表格。我无法在行中添加边框线。列之间有间隙。应该是图片中的样子

这是我在单元格中添加 border-bottom 时得到的结果:

const TableWrapperUI = styled.div`
  display: grid;
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #dbeaf4;
  grid-template-columns: repeat(
    ${props => props.columns && props.columns},
    fit-content(400px)
  );
  justify-items: center;
  padding: 5px;
  justify-content: space-between;
  > span {
    justify-self: left;
    border-bottom: 1px solid red;
  }
`;

您可以在这里查看:https://codesandbox.io/s/goofy-easley-w5rrg

Answer 1

如果你想保持元素之间的差距，你可以在每一行之间添加一个空元素并将其拉伸(stretch)到容器的整个宽度(使用 grid-column 属性)然后添加一个边框

您可以在此处查看示例:

.container{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 10px;
}

.row-border{
    border-top: 2px solid gray;
    grid-column: 1 / 5; /* this code makes the row stretch to entire width of the container */
}

<div class="container">
  <div>col 1 of row 1</div>
  <div>col 2 of row 1</div>
  <div>col 3 of row 1</div>
  <div>col 4 of row 1</div>
  
  <div class="row-border"></div>

  <div>col 1 of row 2</div>
  <div>col 2 of row 2</div>
  <div>col 3 of row 2</div>
  <div>col 4 of row 2</div>

  <div class="row-border"></div>

  <div>col 1 of row 3</div>
  <div>col 2 of row 3</div>
  <div>col 3 of row 3</div>
  <div>col 4 of row 3</div>

  <div class="row-border"></div>

  <div>col 1 of row 4</div>
  <div>col 2 of row 4</div>
  <div>col 3 of row 4</div>
  <div>col 4 of row 4</div>
</div>