使用 CSS 的表中两行之间的空间？

在 web 开发中，表格是一个经常被用到的元素，而通过使用 CSS，我们可以在表格中控制行与行之间的间距。

使用 border-collapse 和 border-spacing 属性

在 CSS 中，我们可以通过设置表格的 border-collapse 属性来控制单元格边框的合并情况。同时，我们还可以使用 border-spacing 属性来设定单元格之间的间距。

table {
  border-collapse: separate; /* 设置为 separate 值，可以使单元格的边框不合并 */
  border-spacing: 10px;     /* 指定单元格之间的间距为 10px */
}

示例代码

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

table {
  border-collapse: separate;
  border-spacing: 10px;
}
td {
  padding: 10px;
  background-color: #eee;
}

效果展示

下面是上述示例中的效果展示：

总结

通过使用 border-collapse 和 border-spacing 这两个 CSS 属性，我们可以轻松地在表格中控制单元格之间的间距，并为表格添加更多的样式。