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

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

以上就是125建站网为大家介绍的关于HTML如何给table添加滚动条的方法,了解更多相关文章请关注125建站网!

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/11796.html

(0)
上一篇 2023年3月8日 下午6:40
下一篇 2023年3月12日 上午9:31

99%的人还看了以下文章

  • 22个HTML5的初级技巧

    本文总结了22个HTML5的初级技巧,希望能对你进一步学习好HTML5会有所帮助。

    2018年3月18日
    9700
  • 如何单独设置打印网页的样式

    做项目,有些网页需要打印,很多时候,是导出WORD或EXCEL再打印。 现在需要页面直接打印,方便没有安装OFFICE的用户。 需求:页面在浏览器中浏览是一种样式,要打印这个页面,是另一种样式。 解决方法:用link标签中的media属性解决此问题。 <link href=”stylesheets/print.css” media=”print” re…

    2019年2月15日
    1.1K0
  • 第15课:最后提示

    祝贺!你已经进入最后一课了! 我已经学到全部知识了? 如果你已经学完以上教程,恭喜你,你已经学到了很多关于HTML的知识,并且完全有能力创建自己的网站!不过,你所学到的只是基础知识,还有许多内容需要掌握。但是你已经为进一步学习打下了坚实的基础。 在最后这一课中,我们将给予一些最后提示: 首先,在HTML文档中,应保持正确的顺序与结构。令你的HTML文档具有良…

    2018年1月18日
    1.7K0
  • CSS border-radius 深入学习(含可视化生成工具)

    没有学过CSS border-radius 的同学,请阅读《css实现圆角矩形、半圆、圆形效果—border-radius使用详解》一文。border-radius 写法: .box{ border-radius: 30%; /* 也可以用PX代替 */ } 矩形的四角会变为相应数值的圆角,如下图: 只输入一个数值,所有角都会被四舍五入,若要固定值可以使用 …

    2019年10月17日 网页制作
    1.7K0
  • 纯CSS制作热门文章排行,且前3名背景不同

    要制作文章排行前10、或评论排行榜1、2、3、4…,还要给前三名加上不同的背景,可以用纯css实现(用Ol,li),但通常网页制作中使用ul的比较多,因为不同浏览器对ol li有序列表默认自带的序号列表有着不同显示,容易引起浏览器兼容问题,所以遇到这样的有序排版布局,最简单是将序号切成背景图片! 使用ul li实现文章排行有序排版布局。   htm…

    2018年7月14日
    2.7K0
  • 巧用边框线实现立体按钮效果(纯CSS)

    本文教你使用CSS制作立体按钮,代码简单。

    2020年2月2日
    3.5K0

发表回复

登录后才能评论