CSS 如何使HTML表头跨越多行

在本文中，我们将介绍如何使用CSS来使HTML表头跨越多行。当表头内容较多时，跨越多行可以更好地展示表格的结构和内容。以下是一些方法和示例，帮助您实现这一效果。

阅读更多：CSS 教程

1. 使用CSS的 white-space 属性

通过设置表头的 white-space 属性为 normal 或 wrap，可以允许文本在表头中换行。这样就可以实现表头内容跨越多行的效果。

<style>
th {
  white-space: normal;
}
</style>

<table>
  <tr>
    <th>这是一个表头，它可能会跨越多行以适应内容长度。</th>
    <th>这是另一个表头，同样可能会跨越多行。</th>
  </tr>
  <tr>
    <td>内容</td>
    <td>内容</td>
  </tr>
</table>

在上面的示例中，两个表头的内容可能会跨越多行以适应其长度。

2. 使用 CSS 的 padding 和 line-height 属性

另一种方法是使用CSS的 padding 和 line-height 属性来控制表头的高度和行高。通过增加 padding 的值来增加表头的高度，然后设置 line-height 的值为与 padding 相同的值，可以使表头跨越多行。

<style>
th {
  padding: 20px;
  line-height: 20px;
}
</style>

<table>
  <tr>
    <th>这是一个表头，它可能会跨越多行以适应内容长度。</th>
    <th>这是另一个表头，同样可能会跨越多行。</th>
  </tr>
  <tr>
    <td>内容</td>
    <td>内容</td>
  </tr>
</table>

上面的示例中，表头的高度被设置为20像素，并且行高也被设置为20像素，这样表头就能够跨越多行。

3. 使用 CSS 的 table-layout 属性

另一种方法是使用CSS的 table-layout 属性来控制表格的布局。通过设置 table-layout 的值为 fixed，可以固定表格的布局，并根据内容自动调整单元格的宽度。

<style>
table {
  table-layout: fixed;
  width: 100%;
}

th {
  white-space: normal;
}
</style>

<table>
  <tr>
    <th>这是一个表头，它可能会跨越多行以适应内容长度。</th>
    <th>这是另一个表头，同样可能会跨越多行。</th>
  </tr>
  <tr>
    <td>内容</td>
    <td>内容</td>
  </tr>
</table>

在这个示例中，设置了 table-layout: fixed，表格的宽度被设置为100%。表头的内容可能会跨越多行以适应其长度。