CSS 减少 HTML 表格行高

在本文中，我们将介绍如何使用CSS来减少HTML表格的行高。

阅读更多：CSS 教程

什么是HTML表格行高

HTML表格是网页开发中常用的一种元素，可以用来展示数据以及提供结构化信息。表格由行和列组成，每一行都包含了多个单元格。行高指的是每一行的高度，它影响了表格的整体美观和可读性。

默认情况下，HTML表格的行高是根据表格内容自动决定的。但有时候我们希望自定义表格行高，以满足不同的设计需求。接下来我们将介绍几种方法来减少HTML表格行高。

使用CSS属性来减少行高

CSS提供了一些属性来控制HTML表格的样式，我们可以利用这些属性来减少行高。

1. line-height 属性

line-height属性可以设置元素的行高。通过将行高设置为较小的值，我们可以减少HTML表格的行高。例如：

table {
  line-height: 1.2;
}

这将把表格的行高设置为1.2倍的字体大小。

2. height 属性

如果我们希望直接设置表格行的高度，可以使用height属性。通过设置height属性，我们可以准确地控制每一行的高度。例如：

tr {
  height: 30px;
}

这将把每一行的高度设置为30像素。

3. padding 和 margin 属性

除了line-height和height属性，我们还可以使用padding和margin属性来减少表格行高。

通过设置padding属性，我们可以增加单元格的内边距，从而减少表格行的高度。例如：

td {
  padding: 5px;
}

这将在每个单元格的上下方增加5像素的内边距，从而减少整个表格行的高度。

类似地，我们可以使用margin属性来减少表格行的高度，例如：

td {
  margin: -5px;
}

这将在每个单元格的上下方添加5像素的负边距，从而减少整个表格行的高度。

示例

为了更好地理解如何减少HTML表格行高，让我们通过一个示例来说明。

假设我们有一个包含5行3列的表格，现在我们希望减少表格行高以节省空间。

<table>
  <tr>
    <td>行1列1</td>
    <td>行1列2</td>
    <td>行1列3</td>
  </tr>
  <tr>
    <td>行2列1</td>
    <td>行2列2</td>
    <td>行2列3</td>
  </tr>
  <tr>
    <td>行3列1</td>
    <td>行3列2</td>
    <td>行3列3</td>
  </tr>
  <tr>
    <td>行4列1</td>
    <td>行4列2</td>
    <td>行4列3</td>
  </tr>
  <tr>
    <td>行5列1</td>
    <td>行5列2</td>
    <td>行5列3</td>
  </tr>
</table>

下面是使用CSS属性来减少表格行高的示例：

table {
  line-height: 1.2;
}

tr {
  height: 30px;
}

td {
  padding: 5px;
}

通过将line-height设置为1.2、行高设置为30像素、以及添加5像素的内边距，我们成功地减少了表格的行高。

总结

通过使用CSS属性，我们可以轻松地减少HTML表格的行高。line-height、height、padding和margin属性都可以用来控制行高。我们可以根据具体需求选择适合的方法来减少表格的行高，以提高网页的美观和可读性。希望本文对你有所帮助！