HTML如何给table添加滚动条

最近在写一个项目的时候输出的结果有点多table的宽度直接把页面撑变形了，就想到了给table加滚动条，接下来吾爱编程为大家介绍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>

3、效果截图：

以上就是吾爱编程为大家介绍的关于HTML如何给table添加滚动条的方法，了解更多相关文章请关注吾爱编程网！