如何给网页中的表格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%的人还看了以下文章

  • Html5一句代码制作语音搜索框

    HTML5+CSS3打造可自动获得焦点和支持语音输入的超酷搜索框

    2022年3月19日 网页制作
    7300
  • 第12课:高度和宽度

    到目前为止,我们还没有在元素尺寸方面给予关注。在这一课,我们将看到为元素定义高度和宽度是十分简单的。 设定宽度[width] 设定高度[height] 设定宽度[width] 你可以通过width属性来设定一个元素的宽度,即在水平方向上的尺寸。 下面是一个简单的例子,它为我们提供了一个可以容纳文本的盒子: div.box {width: 200px;bord…

    2020年2月25日
    1.5K0
  • 第15课:最后提示

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

    2018年1月18日
    2.0K0
  • 跟永哥学HTML5(5):正确使用HTML5的nav和figure

    这节课就给大家讲解常见的HTML5标签错误使用写法,帮助大家理解并学会正确使用HTML5的nav和figure。 1、不要把所有列表式的链接放在nav里 随着HTML5引入了 30个新元素,我们在构造语义化和结构化的标签时的选择也变得有些不慎重。也就是说,我们不应该滥用超语义化的元素。不幸的是,nav就是这样一个被滥用的例子。 nav元素的规范描述如下: n…

    2018年2月3日
    2.2K0
  • 第3课:HTML的元素与标签

    本节课我们学习HTML的重要成分——元素(element)。元素用于结构化HTML文档,并告知浏览器如何呈现网页。一般来说,元素由首标签(start tag)、内容(content)和尾标签(end tag)构成。 “标签”是什么? 标签(tag)指示元素的起始与结束,所有标签都由“<”及“>”所围住,如<html>。一般标签成对出现,首标…

    2018年1月20日
    5.1K0
  • 菜单或新闻列表最后一项的css处理小技巧:not(:last-of-type)

    网页开发时,导航菜单的最后一项或新闻列表的最后一项需要和前面其他项显示不同,如导航的最后一个菜单不再需要分隔符或右边的空白间距,新闻或文章列表的最后一项不需要底边距,列表一般都会有分割线,但是最后一个列表没有分割线等。 如文章列表如下: <ul class=’posts’> <li class=’post’> <h3>中国…

    2018年9月27日
    2.3K0

发表回复

登录后才能评论