Question

我正在使用CSS网格制作表格。我不能在行中添加边框线。列之间存在间隙。应该像图片中的

将边框添加到单元格后，我得到的是：

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

如果要在行之间使用分隔线，请尝试以下方法。

给网格一些背景色。
给予grid-row-gap: 1px（取决于所需的厚度）
为网格的每个子项赋予白色背景

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)
  );
  padding: 5px;
  background-color: #eaeaea;  // step 1
  grid-row-gap: 1px;  // step 2

  > span {
    display: block;
    background-color: #ffffff; // step 3
  }
`;

Answer 2

好的，这是一个小救生员。看起来有点傻，但是可以用。

const TableWrapperUI = styled.div
  display: grid;
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #ff0000;
  grid-template-columns: repeat(
    ${props => props.columns && props.columns},
    fit-content(400px)
  );
  justify-items: center;
  padding: 5px 5px 5px 0;
  overflow: hidden;
  justify-content: space-between;
  > span {
    justify-self: left;
    border-bottom: 1px solid #d1d1d1;
    width:150%;
    text-align: left;
    padding: 10px;
    box-sizing: border-box;
  }
;

DEMO

如果您要使用宽屏布局，只需将其增加150％至300％即可。

Answer 3

如果要保持项目之间的间距，可以在每行之间添加一个空项目，并将其拉伸到容器的整个宽度（使用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>

Answer 4

Good old ::after 会有所帮助 - position: absolute 可以跳过网格。

相对于顶部 DL 元素的位置。然后绝对位置占用了 100% 的空间。您可以移动 ::after 并有边距，不要使用底部，因为它会移动到 DL 的底部。

这里我有 DL 和需要的 DT + DD 行之间的线。

.section dl {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 40px 1.2rem;
    position: relative;
}

.section dd {
    padding: 0 0 40px;
    margin: 0;
}
.section dd:not(:last-child)::after {
    content: '';
    height: 1px;
    width: 100%;
    background: #000;
    position: absolute;
    right: 0;
    margin-top: 40px;
}

CSS网格如何在行之间添加线？

4 个答案: