如何给网页中的表格table添加滚动条

江山如画 • 2023年3月9日下午7:12 • 网页制作 • 阅读 2294

最近在写一个项目的时候输出的结果有点多table的宽度直接把页面撑变形了，就想到了给table加滚动条，接下来125建站网为大家介绍HTML给table添加滚动条的方法，有需要的小伙伴可以参考一下：

1、方法分析：

要给table添加滚动条其实很简单，我们首先把table放到一个div里面，然后再设置div显示滚动条即可。

2、html代码：

<div style="width:400px;height:220px;overflow:scroll;">
  <table class="tableBasic" width="100%" cellspacing="0" cellpadding="8" border="1">
    <tbody>
      <tr>
        <th width="60" align="center">
          日期
        </th>
        <th width="60" align="center">
          项目1
        </th>
        <th width="60" align="center">
          项目2
        </th>
        <th width="60" align="center">
          项目3
        </th>
        <th width="60" align="center">
          项目4
        </th>
        <th width="60" align="center">
          项目5
        </th>
        <th width="70" align="center">
          项目6
        </th>
      </tr>
      <tr>
        <td align="center">
          2020-04-03
        </td>
        <td align="center">
          25681
        </td>
        <td align="center">
          4137
        </td>
        <td align="center">
          5367
        </td>
        <td align="center">
          1599
        </td>
        <td align="center">
          318
        </td>
        <td align="center">
          129
        </td>
      </tr>
      <tr>
        <td align="center">
          2020-04-02
        </td>
        <td align="center">
          65347
        </td>
        <td align="center">
          10616
        </td>
        <td align="center">
          13573
        </td>
        <td align="center">
          4717
        </td>
        <td align="center">
          634
        </td>
        <td align="center">
          25681
        </td>
      </tr>
      <tr>
        <td align="center">
          2020-04-01
        </td>
        <td align="center">
          62191
        </td>
        <td align="center">
          10227
        </td>
        <td align="center">
          13741
        </td>
        <td align="center">
          25681
        </td>
        <td align="center">
          651
        </td>
        <td align="center">
          344
        </td>
      </tr>
      <tr>
        <td align="center">
          2020-03-31
        </td>
        <td align="center">
          65471
        </td>
        <td align="center">
          12421
        </td>
        <td align="center">
          14477
        </td>
        <td align="center">
          4589
        </td>
        <td align="center">
          25681
        </td>
        <td align="center">
          336
        </td>
      </tr>
    </tbody>
  </table>
</div>