手动添加宽度不固定的表格横向滚动条

如果表格的宽度是不固定的，你可以在 CSS 样式中使用 `table-layout: fixed` 来实现固定表格宽度，并且在 HTML 标记中为表格的每一列设置一个百分比宽度，这样每一列的宽度就会自动根据表格宽度进行调整。

以下是一个示例代码：

HTML:

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th style="width: 20%;">Header 1</th>
        <th style="width: 20%;">Header 2</th>
        <th style="width: 20%;">Header 3</th>
        <th style="width: 20%;">Header 4</th>
        <th style="width: 20%;">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: 100%;
  table-layout: fixed; /* 固定表格宽度 */
}

在上面的示例中，我们将表格放在一个名为 .table-container 的 div 元素内，并为该元素设置了宽度和 overflow-x: auto; 属性。表格的宽度被设置为 100%，这样表格的宽度就会自动根据容器宽度进行调整。我们还为表格设置了 `table-layout: fixed` 属性，这样所有列的宽度就会根据表格的第一行来自动调整。

每一列的宽度被设置为 20%，这样每一列就会占据表格的总宽度的 20%。当表格的宽度超过容器宽度时，容器元素会出现横向滚动条，用户就可以通过滚动条来滚动表格了。