如何在CSS表行之间添加空格？

Question

我有一个使用CSS display: table;的网格。

我想要做的是在行之间留一个间隙。

使用display: table-row;时，我有办法做到这一点。我已经尝试了padding和margin但这些不适合我，因为我想设置边距背景颜色。

Answer 1

对于个体细胞

您可以使用透明的border：

来实现这一目标

border: 5px solid transparent;

要仅对单元格的顶部和底部执行此操作，您可以使用：

border-bottom: 5px solid transparent;
border-top: 5px solid transparent;

.table {
  display: table;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
  border: 5px solid transparent;
}

<div class="table">
  <div class="table-row">
    <div class="table-cell">Row 1 Cell 1</div>
    <div class="table-cell">Row 1 Cell 2</div>
  </div>
  <div class="table-row">
    <div class="table-cell">Row 2 Cell 1</div>
    <div class="table-cell">Row 2 Cell 2</div>
  </div>
</div>

每个细胞

如果要将其添加到表格中的每个单元格，可以使用border-spacing上设置的元素的display: table CSS属性：

border-spacing: 5px;

.table {
  border-spacing: 5px;
  display: table;
}

.table-row {
  display: table-row;
}

.table-cell {
  background: #5ae;
  display: table-cell;
}

<div class="table">
  <div class="table-row">
    <div class="table-cell">Row 1 Cell 1</div>
    <div class="table-cell">Row 1 Cell 2</div>
  </div>
  <div class="table-row">
    <div class="table-cell">Row 2 Cell 1</div>
    <div class="table-cell">Row 2 Cell 2</div>
  </div>
</div>

Answer 2

您可以使用

border-spacing:5px;
border-collapse: separate;

http://www.w3schools.com/cssref/pr_border-spacing.asp

.table{  
    border-collapse: separate;
    border-spacing: 10px 10px;
    display:table;
}

.table .row {
  display: table-row;
}

.table .cell {
  display: table-cell;
}

<div class="table">
  <div class="row">
    <div class="cell">x</div>
    <div class="cell">x</div>
  </div>
  <div class="row">
    <div class="cell">x</div>
    <div class="cell">x</div>
  </div>
</div>

Answer 3

您所要做的就是在CSS中为行添加边距。

tr{
margin-bottom:5px;
}