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

CSS 使我们能够轻松地增加表中行与行之间的空间。 在表格中，行之间的间距指的是相邻两行之间的垂直距离。 默认情况下，HTML 表格没有间距，但我们可以使用CSS添加它。

添加表格行间距

使用 CSS 的 border-spacing 属性可以添加表格行间距。使用以下 CSS 代码将 10px 的间距添加到一个表格中的每一行之间：

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

在这个例子中，border-collapse 属性设置为 separate，这是为了确保行间距是可见的。然后，border-spacing 属性设置为 10px，这为每行之间提供了10像素的间距。

此外，您还可以为水平间距和垂直间距分别设置不同的值，如下所示：

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

在这个例子中，第一个值是水平间距，第二个值是垂直间距。 因此，每一行之间都会有10像素的水平间距和5像素的垂直间距。

添加表格边框

您还可以使用 CSS 的 border 属性为表格和表格单元格添加边框。 若要向表格添加边框，请使用以下 CSS 代码：

table {
  border: 1px solid black;
}

在这个例子中，border 属性设置为 1px 实线黑色（solid black），这会将黑色边框添加到表格周围。

类似地，要为表格单元格添加边框，请使用以下 CSS 代码：

td {
  border: 1px solid black;
}

在这个例子中，所有单元格的边框都将设置为 1px 的实线黑色。

总结

通过使用 border-spacing 属性和 border 属性，我们可以轻松地增加表中行之间的间距和边框。这使得表格更加易于阅读和导航。