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

  • vue学习-我的第一个vue代码

    创建一个 .html 文件,然后通过如下方式引入 Vue: <!– 开发环境版本,包含了有帮助的命令行警告 –> <script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script> 或者: <!– 生产环境版本,优化了尺寸和速度 –>…

    2020年6月14日
    2.1K0
  • 第7课:元素的分类与标识(class和id)

    有时,你希望对特定元素或者特定一组元素应用特殊的样式。在这一课,我们将深入学习如何利用class和id来为所选元素指定属性。 如何实现为网站上许多标题中的某一个单独应用颜色?如何实现把网站上的链接分为不同的类,并对各类链接分别应用不同的样式?这只是本课将解决的诸多问题中的最具代表性的两个问题。 用class对元素进行分类 比方说,我们有两个由链接组成的列表。…

    2020年2月25日
    2.4K0
  • 0基础学CSS

    本CSS教程能够让你在数小时内入门CSS,要求你有基本的HTML经验。

    2020年2月22日
    2.0K0
  • 第1课:开始学习HTML

    建议你每天学习2到3课,然后花点时间来实验你所学到的新知识。 学习制作网站是件充满乐趣的事,而且一旦掌握它,你便会感到无比满足。好的,不多说,我们现在就开始吧! 这第一课中,我们简要介绍制作网站所需的工具。 需要哪些工具? “浏览器(browser)”你有了,它是用于浏览网站的程序。你现在就是通过浏览器在观看本页面的。 也许你听说过、甚至用过一些网页制作工具…

    2018年1月20日
    3.1K0
  • CSS进阶,4个案例入门,学会LESS使用

    Less 简介 什么是LESSCSS LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。 LESSCSS可以在多种语言、环境中使用,包括浏览器端、桌面客户端、服务端。 Less语言特性 LESS的变量 变量允许我们单独定义一系列通用的样式…

    2019年7月17日
    1.6K0
  • 哪些浏览器支持HTML5?

    目前支持HTML5的浏览器主要有: 谷歌浏览器(全面支持HTML5)、360浏览器、搜狗浏览器、世界之窗、Firefox、Safari、Opera、QQ浏览器、傲游浏览器、IE10。 如要下载支持HTML5的浏览器,请到官网下载!

    2019年3月13日
    4.4K0

发表回复

登录后才能评论