如何用纯CSS固定thead实现表格滚动？tbody设置overflow之密

最新推荐文章于 2022-05-17 17:44:56 发布
最新推荐文章于 2022-05-17 17:44:56 发布
阅读量9.8k 收藏 2
点赞数 1
分类专栏： CSS+DIV
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/binjly/article/details/9617091
版权

首先，大家是不是在做下面代码这样的尝试？

<table>
  <thead>
    <tr>
      <td>THEAD-TD1</td><td>THEAD-TD2</td>
    </tr>
  </thead>
  <tbody style="height:100px;overflow:auto;">
    <tr>
      <td>TBODY-TD1</td><td>TBODY-TD2</td>
    </tr>
    <tr>
      <td>TBODY-TD1</td><td>TBODY-TD2</td>
    </tr>
    <tr>
      <td>TBODY-TD1</td><td>TBODY-TD2</td>
    </tr>
    <tr>
      <td>TBODY-TD1</td><td>TBODY-TD2</td>
    </tr>
    <tr>
      <td>TBODY-TD1</td><td>TBODY-TD2</td>
    </tr>
  </tbody>
</table>

然后发现，不论怎么调，期待中的滚动条并没有出现？有木有？


其实，只要再加一条属性display:block，就OK了：

<table>
  <thead>
    <tr>
      <td>THEAD-TD1</td><td>THEAD-TD2</td>
    </tr>
  </thead>
  <tbody style="height:100px;overflow:auto;display:block;">
    <tr>
      <td>TBODY-TD1</td><td>TBODY-TD2</td>
    </tr>
    <tr>
      <td>TBODY-TD1</td><td>TBODY-TD2</td>
    </tr>
    <tr>
      <td>TBODY-TD1</td><td>TBODY-TD2</td>
    </tr>
    <tr>
      <td>TBODY-TD1</td><td>TBODY-TD2</td>
    </tr>
    <tr>
      <td>TBODY-TD1</td><td>TBODY-TD2</td>
    </tr>
  </tbody>
</table>

现在试试，期待已久的滚动条出现了，有木有？ 原来，这是因为tbody默认是display:table-row-group。


可是，似乎哪里不对……

对的，列之间不再对齐了。因为thead的display默认属性是：table-header-group，跟tbody的table-row-group是配套使用的。现在你把他们其中一个改了，自然就不再对齐了。

那么，该怎么解决呢？我把国内国外的网站都翻了个遍，也没有人有好的办法，唯一的办法就是：给thead也设置display:block，同时thead和tbody对应的td设置同样的width。这也算是纯CSS方案的一点牺牲吧。

<table>
  <thead style="display:block;">
    <tr>
      <td style="width:100px;">THEAD-TD1</td><td style="width:100px;">THEAD-TD2</td>
    </tr>
  </thead>
  <tbody style="height:100px;overflow:auto;display:block;">
    <tr>
      <td style="width:100px;">TBODY-TD1</td><td style="width:100px;">TBODY-TD2</td>
    </tr>
    <tr>
      <td>TBODY-TD1</td><td>TBODY-TD2</td>
    </tr>
    <tr>
      <td>TBODY-TD1</td><td>TBODY-TD2</td>
    </tr>
    <tr>
      <td>TBODY-TD1</td><td>TBODY-TD2</td>
    </tr>
    <tr>
      <td>TBODY-TD1</td><td>TBODY-TD2</td>
    </tr>
  </tbody>
</table>

当然，如果不愿意做这样的牺牲，那至少目前还是只能配合我们强大的JS来实现了。

下面提供一段配合这个方案的自动适配td宽度的JS，基于JQuery的：

$(function(){
    $("table").children("thead").find("td,th").each(function(){
	    var idx = $(this).index();
		var td = $(this).closest("table").children("tbody")
		                .children("tr:first").children("td,th").eq(idx);
		$(this).width() > td.width() ? td.width($(this).width()) : $(this).width(td.width());
	});
});

浏览器支持情况：

firefox、chrome、safari均支持，IE10在声明html5（<!DOCTYPE HTML>）之后可以支持，IE9及以下均不支持。


Vilien
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
固定table的thead表头
11-11
固定table的thead表头
html body overflow,html - tbody overflow hidden not working - Stack Overflow
weixin_34190533的博客
06-29 86
I am trying to make tbody overflow hidden for y and auto for x but no success, i tried few techniques here,but none worked, I want to make tbody scroll this way thead will stay where it is.HTMLColumn1...
table表格，thead固定，tbody滚动条
Gleason
08-03 1万+
如上图所示 之前 写的样式 不变, 想让 thead 固定 不动, tbody 增加滚动条,在样式中添加如下代码   table tbody { display: block; height: 195px; overflow-y: scroll; } table thead, tbody tr { ...
table表格，让thead固定，tbody有滚动条
sinat_41274057的博客
10-29 1554
** table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。 ** 找了好久才找到一篇可以简单粗暴就能用的，所以拿过来算是收藏了。里面有一个css2里的命令是我没 用过的也是这里面关键的：table-layout:fixed; 原理很简单，有爱研究的童鞋可以去css官网看看说明文档。 转载自：博客园 ：webSong https://www.cnblogs.com/...
原生table:表格table中thead固定，tbody超出高度出现滚动条
热门推荐
qq_37899792的博客
05-16 2万+
首先认识一下表格的table-layout属性 tableLayout 属性用来显示表格单元格、行、列的算法规则。 tableLayout有如下三个值：autofixedinherit 值 描述 auto 默认。列（td，th）宽度由单元格内容设定。 (1) 给td指定的width不一定生效，td的width会自动调整 (2) text-overflo...
纯CSS实现表头固定表格滚动条效果
12-24
以上就是纯CSS实现表头固定表格滚动条效果的基本步骤。通过这种方式，你可以轻松地将这个功能集成到JSP、ASP、PHP或其他服务器端框架中，为用户提供更好的数据浏览体验。记得根据实际项目需求进行适当的定制和优化。
纯CSS实现的表格滚动条效果
02-16
本主题聚焦于如何使用纯CSS技术来实现一个既美观又实用的表格滚动条效果。这种效果可以让用户在不改变表格整体布局的情况下，优雅地浏览表格中的所有内容。 首先，我们来探讨CSS在创建滚动条样式上的关键属性。CSS3...
用css给tbody加垂直滚动条的具体思路及样式代码
12-13
1，把tbody设置成display:block，然后就对其高度设置一个固定值，overflow设置成auto。 2，把thead的tr设置成display:block。 3，因为都设置成block所以要给td手动添加宽度 width:200px 代码如下： 复制代码代码...
jQuery头部固定表格滚动条代码
06-24
首先，获取表格的thead和tbody元素，然后在滚动事件中计算thead的宽度和位置，当tbody滚动时，将thead的位置固定在顶部。 ```javascript $(document).ready(function() { var $table = $('#scrollTable'); var $...
bootstrap表格固定表头并且tbody部分添加滚动条
10-24
2. **tbody滚动**：给`<tbody>`设置一个固定的高度，并添加`overflow-y: auto;`，这将启用竖向滚动条。例如： ```css table.table-fixed tbody { height: 300px; /* 自定义高度 */ overflow-y: auto; } ``` 3...
Html - Table 表头固定和 tbody 设置 height 在IE不起作用的解决
weixin_30810583的博客
07-11 641
原文地址，转载请注明出处：http://www.cnblogs.com/jying/p/6294063.html 做项目的时候发现给 tbody设置 height 和 overflow-y 在IE下不起作用，或者变为每行高度为height的高度了，经查找资料学习，可加入position:absolute 控制（则其父元素需加position:relative）。 相关学习链接：http...
头部固定悬浮table表头(thead)的方法 (实用、赞）
chelen_jak的专栏
05-17 1424
原文出处：https://www.cnblogs.com/circleline/p/7698249.html（思路见原文） 大概思路： 对页面滚动事件进行监听，当页面向上滚动，表头滚出页面时，显示一个复制出来的表头。效果如下： 代码如下:（注意：原文部分代码无效果，所以这里做了些调整） <!-- 来源： https://www.cnblogs.com/circleline/p/7698249.html --> <!DOCTYPE html> <ht...
我是如何做固定头部(thead)的
weixin_33895016的博客
03-06 2750
在前端开发中经常遇到需要页面滚动时，固定某个区域显示，常见表格的需求，因为表格有很多列，如果列名不固定在顶部显示，滚动到底部时，可能就不知道某些列对应的是什么了 那我们就聊一下如何在滚动时固定(thead)，让它始终显示在列表的上方 css的方案 如何让tbody滚动 如果我们用css来实现，网上常见的一种方案是给tobdy一个固定高度，...
table中，表头固定，body滚动的方式。也就是使用：css Table布局-display:table
weixin_30349597的博客
04-09 260
两种类型的表格布局 你有两种方式使用表格布局-HTML Table（<table>标签）和CSS Table（display:table等相关属性）。 HTML Table是指使用原生的<table>标签，而CSS Table是指用CSS属性模仿HTML 表格的模型。 在W3C关于<table>相关标签的文档中我们可以找到，HTML 4中<tab...
table thead 固定 tbody滚动
weixin_30340819的博客
04-20 112
一种简单的方法实现 支持多行th <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.mi...
html 表格选择滚动条,table设置tbody滚动条
weixin_36064196的博客
06-03 1417
jsp页面table中只让tbody 部分显示滚动条滚动，the2个table. 一个仅显示 table head部分, 另外一个仅显示 body部分. body部分的表, 设置 overflow:auto 即可. 难点: 2个table的 header 保持宽度一致, 以及左右滚动时保持一致. jquery 做个宽度自动匹配. 尝试下吧, 我想做的, 后来需CSS布局HTML小编今天和大家分享停...
thead固定tbody滚动 table的局部滚动
makelucky的博客
11-01 387
最近在写后台管理系统，在数据的显示上，table如果整体滚动的话，头部信息就会滚到消失，这样显示不太友好，百度了很多，终于实现了这种方法。 首先thead设置 thead{ display:table/inline-block; } 然后tbody设置 tbody{ display:inline-block;//或者block height:300px;//设置...
HTML table 表格 thead 表头固定，tbody 滚动
csdn_Info的专栏
04-12 7219
第一种方式实现 第二种方式实现 第一种方式实现 使用 css 样式设置thead 和 tbody 【 推荐方式 】 #tableid&gt;thead&gt;tr{ display: table; width: 100%; table-layout: fixed; } #tableid&gt;tbody{ display: blo...
通过css样式给表格tbody加垂直滚动条
weixin_30321709的博客
08-21 843
tbody加滚动条实现思路： 1，把tbody设置成display:block，然后就对其高度设置一个固定值，overflow设置成auto。 2，把thead的tr设置成display:block。 3，因为都设置成block所以要给td手动添加宽度。 4，考虑到 tbody 产生了滚动条，这时会影响tbody以及thead的宽度，可以采用针对tbody设置::-webkit-...
table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法
最新发布
01-07
要实现table表格，让thead固定，tbody有滚动条，并且让它们的对齐，可以使用纯CSS来实现。首先，我们可以使用position: sticky;来让thead固定在顶部，然后设置overflow-y: scroll;来给tbody添加垂直滚动条。另外，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值