当前位置:首页 > 网页设计 >HTML >

HTML如何给table添加滚动条

发布时间:2020-04-05 11:27:02 作者:佚名 阅读:(67)

最近在写一个项目的时候输出的结果有点多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添加滚动条的方法,了解更多相关文章请关注吾爱编程网!

欢迎分享转载→ HTML如何给table添加滚动条

© 2015-2019 - 吾爱编程网 版权所有 苏ICP备18033726号-1关于我们 - 网站声明 - 联系我们