手动添加表格横向滚动条

当表格的内容过宽超出容器时，可以通过添加横向滚动条来实现内容的滚动。

要手动添加表格横向滚动条，可以按照以下步骤进行：

1. 将表格包裹在一个容器元素内，例如一个 div 元素。
2. 为容器元素设置宽度和 overflow-x: auto; 属性。这将使得容器元素出现横向滚动条，并且当表格宽度超过容器宽度时，表格会在容器内滚动。
3. 为表格设置一个固定的宽度，这样表格就不会随着内容的变化而改变宽度了。

下面是一个示例代码：

HTML:

<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>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Row 1, Column 1</td>
        <td>Row 1, Column 2</td>
        <td>Row 1, Column 3</td>
        <td>Row 1, Column 4</td>
        <td>Row 1, Column 5</td>
      </tr>
      <tr>
        <td>Row 2, Column 1</td>
        <td>Row 2, Column 2</td>
        <td>Row 2, Column 3</td>
        <td>Row 2, Column 4</td>
        <td>Row 2, Column 5</td>
      </tr>
      <!-- more rows -->
    </tbody>
  </table>
</div>

CSS:

.table-container {
  width: 100%;
  overflow-x: auto;
}

table {
  width: 1000px; /* 固定宽度 */
}

在上面的示例中，我们将表格放在一个名为 .table-container 的 div 元素内，并为该元素设置了宽度和 overflow-x: auto; 属性。表格的宽度被设置为 1000px，这样表格就不会随着内容的变化而改变宽度了。当表格的宽度超过容器宽度时，容器元素会出现横向滚动条，用户就可以通过滚动条来滚动表格了。