[分享]css单独设置tbody行间距

在网页制作中，通过 CSS 样式来给网页添加样式是非常常见的。而在表格的制作中，我们通常也需要通过样式来进行设置。这里介绍一种常见的实现方式，即通过 CSS 单独设置 tbody 行间距。在默认的情况...

在网页制作中，通过 CSS 样式来给网页添加样式是非常常见的。而在表格的制作中，我们通常也需要通过样式来进行设置。这里介绍一种常见的实现方式，即通过 CSS 单独设置 tbody 行间距。

在默认的情况下，浏览器会自动为表格中的每一行设置一定的行间距，这会影响表格的展示效果。那么，我们如何通过 CSS 来单独设置 tbody 行间距呢？

tbody {
  border-collapse: collapse;
  border-spacing: 0;
}

tbody > tr {
  height: 30px; /* 设置行高 */
  line-height: 30px; /* 设置行内元素垂直居中 */
} 

代码解释：

首先，我们需要先清除 tbody 固有的行间距，这里通过设置 border-collapse: collapse 和 border-spacing: 0 实现。

然后，我们通过选择器 tbody > tr 单独设置 tbody 中每一行的样式，包括行高和行内元素的垂直对齐方式。这里将行高设置为 30px，并通过设置 line-height: 30px 让行内元素垂直居中。

通过以上代码，我们就可以单独设置 tbody 行间距了。需要注意的是，如果表格中还有其他设置行高的样式，需要根据实际情况进行调整。