垂直滚动表格 - CSS

在 HTML 中，创建一个表格是件很容易的事情。但是当表格的内容超过了页面的大小时，我们就需要为表格添加滚动条。本文将介绍如何使用 CSS 实现带有垂直滚动条的表格。

HTML 代码

首先，我们需要创建一个包含数据的表格。以下是一个示例表格的 HTML 代码：

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
      <th>Header 4</th>
      <th>Header 5</th>
      <th>Header 6</th>
      <th>Header 7</th>
      <th>Header 8</th>
      <th>Header 9</th>
      <th>Header 10</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
      <td>Data 4</td>
      <td>Data 5</td>
      <td>Data 6</td>
      <td>Data 7</td>
      <td>Data 8</td>
      <td>Data 9</td>
      <td>Data 10</td>
    </tr>
    <tr>
      <td>Data 11</td>
      <td>Data 12</td>
      <td>Data 13</td>
      <td>Data 14</td>
      <td>Data 15</td>
      <td>Data 16</td>
      <td>Data 17</td>
      <td>Data 18</td>
      <td>Data 19</td>
      <td>Data 20</td>
    </tr>
    <!-- ... -->
  </tbody>
</table>

CSS 代码

接下来，我们将为表格添加样式以实现垂直滚动条。为此，我们将使用以下 CSS 属性：

.table-container {
  height: 300px; /* 设置容器高度 */
  overflow-y: auto; /* 显示垂直滚动条 */
}

此外，我们还需要将表格设置为 display: block; 以使其自适应容器的宽度。修改后的 HTML 和 CSS 代码如下：

<div class="table-container">
  <table>
    <!-- 表格内容 -->
  </table>
</div>

.table-container {
  height: 300px;
  overflow-y: auto;
}

table {
  display: block; /* 设置为块级元素 */
  table-layout: fixed; /* 固定列宽 */
  width: 100%; /* 自适应容器宽度 */
}

完整的代码片段

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
        <th>Header 4</th>
        <th>Header 5</th>
        <th>Header 6</th>
        <th>Header 7</th>
        <th>Header 8</th>
        <th>Header 9</th>
        <th>Header 10</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
        <td>Data 4</td>
        <td>Data 5</td>
        <td>Data 6</td>
        <td>Data 7</td>
        <td>Data 8</td>
        <td>Data 9</td>
        <td>Data 10</td>
      </tr>
      <tr>
        <td>Data 11</td>
        <td>Data 12</td>
        <td>Data 13</td>
        <td>Data 14</td>
        <td>Data 15</td>
        <td>Data 16</td>
        <td>Data 17</td>
        <td>Data 18</td>
        <td>Data 19</td>
        <td>Data 20</td>
      </tr>
      <!-- ... -->
    </tbody>
  </table>
</div>

<style>
  .table-container {
    height: 300px;
    overflow-y: auto;
  }

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

以上是制作带有垂直滚动条的表格的完整代码。使用以上代码，您可以实现自己的表格并使其具有与您所需的相同功能。