html页面中，表格数据可以固定表头，表数据部分做滚动条显示，如何实现

最新推荐文章于 2025-08-03 12:46:35 发布
原创 最新推荐文章于 2025-08-03 12:46:35 发布 · 8.4k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #class #border #table #css #div

该博客介绍了如何通过CSS样式来实现HTML表格的表头固定，同时让表格数据部分显示滚动条的效果。具体实现方法是通过设置特定的class，如`.td_relative`，并应用expression、position、z-index等CSS属性来完成。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

为了找固定表头，表数据部分做滚动条显示，找很久，在http://topic.youkuaiyun.com/t/20060324/09/4636345.html中最后一个回帖中，

看到了这个利用css来实现的方法。

请看一下代码html代码，以下代码可以直接拷贝到编辑器中，验证：

 <style   type="text/css">  
  .td_relative   {  
          background-color:   #CCCCCC;  
          top                           :   expression(document.getElementById("dv").scrollTop-1);  
          position                 :   relative;  
          z-index                   :   1  
  }  
  </style>  
  <body>  
  </table>  
  <div   style="width:800;   height:300;   overflow:auto;"   id="dv">  
  <table   border="1"   cellpadding="0"   cellspacing="0"   id="tb"   width="800">  
  <tr>  
  <td   class="td_relative">ID</td>  
  <td   class="td_relative">名字</td>  
  <td   class="td_relative">时间</td>  
  <td   class="td_relative">类型</td>  
  <td   class="td_relative">采集类型</td>  
  <td   class="td_relative">标准</td>  
  <td   class="td_relative">得粉碎</td>  
  <td   class="td_relative">xzc在左侧</td>  
  <td   class="td_relative">xzc在左侧</td>  
  <td   class="td_relative">xzc在左侧</td>  
  <td   class="td_relative">xzc在左侧</td>  
  <td   class="td_relative">xzc在左侧</td>  
  <td   class="td_relative">xzc在左侧</td>  
  <td   class="td_relative">地方规定萨发</td>  
  <td   class="td_relative">地方规定萨发</td>  
  <td   class="td_relative">地方规定萨发</td>  
  <td   class="td_relative">电流曲线</td>  
  <td   class="td_relative">似懂非懂司法三分</td>  
  <td   class="td_relative">似懂非懂司法三分</td>  
  <td   class="td_relative">似懂非懂司法三分</td>  
  <td   class="td_relative">似懂非懂司法三分</td>  
  </tr>  
  <tr>  
  <td   >xzczc左侧</td>  
  <td   >得粉碎</td>  
  <td   >xzc在左侧</td>  
  <td   >梵蒂冈的地方规定萨发随风倒三大肃反似懂非懂司法三分速度   方法光大给地方   </td>  
  <td   >xzc在左侧</td>  
  <td   >xc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xz在左侧</td>  
  <td   >xzc在左侧</td>  
  </tr>  
  <tr>  
  <td   >xzczc左侧</td>  
  <td   >得粉碎</td>  
  <td   >xzc在左侧</td>  
  <td   >梵蒂冈的地方规定萨发随风倒三大肃反似懂非懂司法三分速度   方法光大给地方   </td>  
  <td   >xzc在左侧</td>  
  <td   >xc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xz在左侧</td>  
  <td   >xzc在左侧</td>  
  </tr>  
  <tr>  
  <td   >xzczc左侧</td>  
  <td   >得粉碎</td>  
  <td   >xzc在左侧</td>  
  <td   >梵蒂冈的地方规定萨发随风倒三大肃反似懂非懂司法三分速度   方法光大给地方   </td>  
  <td   >xzc在左侧</td>  
  <td   >xc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xz在左侧</td>  
  <td   >xzc在左侧</td>  
  </tr>  
  <tr>  
  <td   >xzczc左侧</td>  
  <td   >得粉碎</td>  
  <td   >xzc在左侧</td>  
  <td   >梵蒂冈的地方规定萨发随风倒三大肃反似懂非懂司法三分速度   方法光大给地方   </td>  
  <td   >xzc在左侧</td>  
  <td   >xc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xz在左侧</td>  
  <td   >xzc在左侧</td>  
  </tr>  
  <tr>  
  <td   >xzczc左侧</td>  
  <td   >得粉碎</td>  
  <td   >xzc在左侧</td>  
  <td   >梵蒂冈的地方规定萨发随风倒三大肃反似懂非懂司法三分速度   方法光大给地方   </td>  
  <td   >xzc在左侧</td>  
  <td   >xc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xz在左侧</td>  
  <td   >xzc在左侧</td>  
  </tr>  
  <tr>  
  <td   >xzczc左侧</td>  
  <td   >得粉碎</td>  
  <td   >xzc在左侧</td>  
  <td   >梵蒂冈的地方规定萨发随风倒三大肃反似懂非懂司法三分速度   方法光大给地方   </td>  
  <td   >xzc在左侧</td>  
  <td   >xc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xzc在左侧</td>  
  <td   >xz在左侧</td>  
  <td   >xzc在左侧</td>  
  </tr>  
  </table>  
  </div>  
  </body>

HTML表格滚动条 两种形式
06-25
表格也可做成滚动条 用处不是很大,初学者可学习
html table表格设置滚动条
热门推荐
西凉的悲伤博客
08-24 2万+
table对tbody进行设置使其能够进行滚动。 效果如下： 代码如下： <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>表格滚动</title> <style> table,tbody { disp
HTML表格体滚动
dbeidouxingf的博客
08-22 1785
使用table-layout：fixed后。整个每一列的宽度由列所在表头确定，可以给表头th元素设置width，但是当单元格内内容超长时，设置的宽度就会有出入。可以给一个宽度较为固定的列不设置宽度，自适应从而保证其他元素宽度足够不变。使用后表格体会出现侧边的滚动条，但是表格头固定，可能会出现上下并不对齐的现象。原生的表格元素添加scroll并不会生效，需要改变表格的属性。
HTML页面table滚动条的实现
好久不见的流星
05-08 2万+
有很多页面由于数据量过大，会产生横纵滚动条。为了便于使用者观看，我们要把表头固定一下。根据这个需求写了个demo来实现这个功能。
Html table 滚动条
小虎博客
07-04 1221
<table style="width: 100%; border-collapse: collapse; border-color: rgb(211, 214, 219); color: black;"><thead style="background-color: rgb(248, 248, 248);"><tr style="border-color: rgb(211, 214, 219);"><th style="width: 30px; text-alig
bootstrap表格固定表头并且tbody部分添加滚动条
10-24
通过以上步骤，我们可以在Bootstrap表格中实现tbody部分的竖向滚动条，同时保持表头固定。这个功能对于展示大量数据的页面尤其有用，可以提高用户的浏览效率，使他们能更方便地查看和比较表格中的信息。在实际开发中...
html Table 表头固定的实现
09-22
总的来说，通过上述方法，可以较为简单地实现一个固定表头的HTML表格，这个技术在现代网页设计中非常实用，能够提升用户体验，特别是在需要处理大量表格数据时。当然，固定表头的实现还可能会涉及一些其他因素，比如...
解决layui表格的表头不滚动的问题
10-16
这样做是为了让表头保持固定，不随滚动条移动。第二个 table 只包含表体，不包含表头，这样可以确保 tbody 部分能够正常滚动。 2. 对于第二个 table，我们需要将其包裹在一个具有固定高度和宽度的 div 元素内。通过...
解决layui数据表格table的横向滚动条显示问题
10-16
这样做可以确保在页面加载完毕后，垂直滚动条始终存在。如果采用这种方法，可能需要在页面加载完成后执行一段JavaScript代码来调整body的高度： ```javascript window.onload = function() { var body = document....
js实现的GridView即表头固定表体有滚动条且可滚动
10-26
在JavaScript和ASP.NET中实现一个具有固定表头和滚动条的GridView控件，是为了提供更好的用户体验，特别是当表格数据较多时。这样的设计使得用户在滚动查看数据时，表头始终可见，便于理解每一列的数据含义。以下是...
大量数据html页面表格滚动显示
03-08
可从后台写循环获取上万数据，赋值到js全局变量，每次滚动显示所需分页数据，不会一次性显示大数据量导致页面滚动卡死，从ag-grid控件中获取想法，该文件可参考，ag-grid利用css3不兼容ie8，已换成别的想法支持
html 表格加滚动条
guoxiaohuivip的博客
02-22 1万+
思路： 1.表格放在Div中，设定Div的宽度和高度（不能用百分比），并设置纵向滚动条始终显示。 2.设定表格的宽度比Div小一个滚动条的宽度（如Div宽度为500，滚动条宽度为16，则表格的宽度应该设置为500-16=484）。 3.表格采用 thead,th标签            Header       1     Header       2
html_table_添加滚动条
icecoola_的博客
11-14 1073
html table 外面加div 超过某高度 显示滚动条 <div style="width:100%; height:600px; overflow-y:scroll;"> <table > <tbody>
html table 滚动条设置
jidawanghao的专栏
05-22 528
<html> <head> <meta charset="utf-8"> <style> </style> </head> <body> <div style="overflow:scroll;"> <table border="1"> <tbody> <tr> ...
html中table设置滚动条
IT_Octopus的博客
04-13 1664
主要是给table放到一个div里去，然后再设置div显示滚动条 <!--div比table大小要小才会显示--> <div style="overflow-x: auto; overflow-y: auto; height: 100px; width:200px;"> <table id="table" border="1" align="center" ...
页面实现表格滚动
qq_39091546的博客
03-06 514
JS代码 initScrollBox: function () { var speed = [100, 100, 100, 100]; var boxes = $('.boxscrolls'); var me = this; boxes.each(function (i) { var box = $(this); var table = $(th...
实现HTML表格两种滚动条形式
最新发布
weixin_42581003的博客
08-03 894
原生的滚动条虽然提供了基本的滚动功能，但是在样式和用户体验方面存在局限性。它们在不同的操作系统和浏览器之间可能会呈现出不同的视觉效果，这会影响到网页界面的一致性和美观度。此外，原生滚动条的大小和颜色通常是固定的，这在很多情况下并不能满足设计师对于界面风格的个性化需求。自定义滚动条样式则可以打破这些局限性，允许开发者根据网站的风格和品牌特色来设计滚动条，从而提升用户体验。自定义滚动条可以使用CSS伪元素来实现各种创意设计，包括但不限于改变滚动条的颜色、宽度、轨道、滑块等。
带滚动条的表格
Coding a Life
07-22 5733
有时候需要使用表格来展示一些数据，通常有两种方式：分页和全量。 全量展示时，如果数据量大，表格就会非常的长，视觉和使用效果都很差。 如果表格可以固定长度，内容可以上下滚动，且标题不动，这样看起来就好多了。 那么该如何实现呢？这里想到了一种方法，即表格内部再嵌入一个表格，内部固定高度，以达到滚动的效果。 示例代码如下： table {
html固定表头，表单内容垂直循环滚动
大前端程序猿
10-17 8650
项目中需要实现一个html页面，页面中的table内容垂直滚动显示数据，如下图所示： 下面记录实现以上功能的代码： Bootstrap 101 Template .content { width: 500px; margin: 50px 50px;
实现HTML页面表格滚动时固定表头和侧栏
这里的`table-fixed-head`是一个预设的Bootstrap类，可以实现固定表头的功能。对于固定列，可能需要额外的JavaScript代码或自行编写CSS规则。 ### 结语 在HTML页面中固定表格的行和列，主要目的是提升用户在操作...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值