CSS HTML表格的固定页眉和页脚，可滚动的主体而不需要固定宽度

在本文中，我们将介绍如何使用CSS和HTML创建一个具有固定页眉和页脚以及可滚动主体的表格，而不需要固定宽度。

阅读更多：CSS 教程

HTML结构

首先，我们需要创建HTML结构来组织我们的表格。以下是一个示例HTML结构：

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
        <!-- 更多表头列 -->
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
        <!-- 更多数据列 -->
      </tr>
      <!-- 更多数据行 -->
    </tbody>
    <tfoot>
      <tr>
        <td>Footer 1</td>
        <td>Footer 2</td>
        <td>Footer 3</td>
        <!-- 更多页脚列 -->
      </tr>
    </tfoot>
  </table>
</div>

在这个示例中，我们使用div元素添加了一个类名为table-container的容器，用于包裹整个表格。在table标签内部，我们使用thead元素来定义表格的页眉，tbody元素来定义表格的主体，tfoot元素来定义表格的页脚。每一行内容都使用tr标签包裹，每个单元格使用th或td标签表示。

CSS样式

接下来，我们需要使用CSS样式来实现表格的固定页眉和页脚以及可滚动主体。以下是CSS样式的示例代码：

.table-container {
  width: 100%;
  height: 300px;
  overflow: auto;
}

table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

thead,
tfoot {
  background-color: #f1f1f1;
  position: sticky;
  top: 0;
}

th,
td {
  padding: 8px;
  text-align: left;
  border: 1px solid #ddd;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

在这个示例中，我们给包含表格的容器.table-container设置了固定高度和溢出属性overflow: auto;，这样可以在表格内容超过容器高度时显示滚动条。对于表格本身，我们使用了width: 100%;来确保表格的宽度适应容器的宽度。table-layout: fixed;属性让表格的列宽度根据表头单元格的宽度来定义，而不是依赖于内容的宽度。border-collapse: collapse;属性用于合并单元格边框。

对于表格的页眉和页脚，我们使用了position: sticky;和top: 0;属性将其固定在容器的顶部。这样，当表格主体的内容滚动时，页眉和页脚会保持可见。为了增加可读性，我们还给页眉和页脚添加了背景颜色background-color: #f1f1f1;。

对于表格中的单元格，我们使用了一些基本的样式属性。padding: 8px;属性用于设置单元格的内边距，text-align: left;属性用于将文本内容左对齐，border: 1px solid #ddd;属性用于为单元格添加边框。为了防止单元格内容过长溢出显示，我们使用了white-space: nowrap;属性使文本内容不换行，overflow: hidden;属性来隐藏溢出内容，text-overflow: ellipsis;属性来在内容溢出时显示省略号。

示例

现在，我们已经完成了HTML结构和CSS样式的设置，下面是一个示例表格的展示：

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
      </tr>
      <tr>
        <td>Data 4</td>
        <td>Data 5</td>
        <td>Data 6</td>
      </tr>
      <!-- 更多数据行 -->
    </tbody>
    <tfoot>
      <tr>
        <td>Footer 1</td>
        <td>Footer 2</td>
        <td>Footer 3</td>
      </tr>
    </tfoot>
  </table>
</div>

通过应用上述的HTML结构和CSS样式，我们可以得到一个具有固定页眉和页脚以及可滚动主体的表格。当表格内容超过容器的高度时，我们可以通过滚动条来访问表格的内容，而页眉和页脚会一直保持可见。