html 控制表格Tbody内容滚动

最新推荐文章于 2025-05-14 18:18:51 发布
最新推荐文章于 2025-05-14 18:18:51 发布
阅读量4k 收藏 1
点赞数 2
CC 4.0 BY-SA版权
分类专栏： 工作中的坑 文章标签： 表格 html tbody thead
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/typeof_yaco/article/details/53765403
本文介绍了一种解决HTML表格中tbody内容超出后实现滚动的方法。通过调整thead和tbody的display属性为block，并设置tbody的高度和td的宽度，可以使得表格内容在不破坏布局的情况下实现滚动效果。

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

html里面表格是不容易控制的元素，我在项目中遇到过想让tbody内容超出后滚动，我尝试了很多办法，比如把thead设置position：absolute；再设置top啊，margin啊。。。都感觉不太好。


直接设置tbody  overflow：scroll / auto； 是不管用的，要把


thead 和 tbody 都设置display：block；


tbody还要设置height，和td宽度，不会再跟thead对齐了。


到此完美解决!

table表格，让thead固定，tbody内容滚动，关键是都对齐的纯css写法
宝码香车的博客
09-20 2314
附具体完整代码，深入理解，彻底掌握！可以一键复制，查看效果。
CSS设置table下tbody的滚动条的实现
09-22
CSS设置table下tbody的滚动条实现是一种网页布局技术，能够让HTML表格的tbody部分在内容超出可视区域时显示出垂直滚动条，而thead（表头）则保持固定不动。这种技术在制作具有大量数据内容的网页表格时非常有用，...
table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法
08-29
table表格，让thead固定，tbody有滚动条， 关键是都对齐的纯css写法关键是都对齐的纯css写法
完美tbody滚动效果
There is no one l would rather be than me
01-08 942
效果图： 源码： <!DOCTYPE html> <html> <head> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } .mytable{ width: 800px; background-col.
HTML表格基础详解
最新发布
2403_88477236的博客
05-14 2267
在现在 div 大行其道的时代，table 这个标签似乎很少被人提及，到处都是 div+css 布局的书以及博客文章，但其实 table 以及连带的其他表格标签依然在网页中占很重要的地位，特别是后台展示数据的时候表格运用是否熟练就显得很重要，一个清爽简约的表格能够把繁杂的数据表现得很有条理，虽然 div 布局也可以做到，但是总没有表格来得方便。4、设置 <thead> 和 <tfoot> 的一个好处是，当打印很长的需要分页的表格时，每一页上都会有 <thead>、<tfoot> 的内容。
HTML table表格 固定表头 tbody加滚动条
沐枫
12-31 2万+
纯CSStable表格thead固定tbody滚动效果 由于项目需要，在表格中，当数据量越来越多时，就会出现滚动条，而在滚动的过程中，默认情况下表格头部会跟着表格内容一起滚动，导致看不到头部对应的字段名，影响体验效果！ 实现思路： 将内容要滚动的区域控制在 tbody 标签中添加 overflow-y:auto; 样式，给 tr 标签添加table-layout:fixed;...
table滚动tbody
qq_36971710的博客
07-09 1563
table tbody { display:block; height:500px; overflow-y:scroll; -webkit-overflow-scrolling: touch; // 为了滚动顺畅 } table tbody::-webkit-scrollbar { display: none; // 隐藏滚动条 } table thead, tbody tr { display:...
table设置tbody滚动条
web全栈开发的博客
04-15 852
table tbody { display: block; height: 400px; overflow-y: scroll; } table thead, tbody tr, tfoot tr { display: table; width: 100%; height: 40px; table-layout: fixed; font-size: 16px; text-align:center; } .
CSS 给 table 的 tbody加滚动条
weixin_45062076的博客
04-10 666
table tbody { height: 200px; overflow-y: auto; display: block; } table thead, tbody tr { display: table; width: 100%; }
html中table固定头部表格tbody可上下左右滑动
01-19
当表格头部固定时，需要分为两个表格来做：一部分是thead，一部分是tbody，具体实现方式如下： html代码： <th><div>标题一</div></th> <th><div>标题二</div></th> <th><div>标题三</div></th> <th>...
大量数据html页面表格滚动显示
03-08
可从后台写循环获取上万数据，赋值到js全局变量，每次滚动显示所需分页数据，不会一次性显示大数据量导致页面滚动卡死，从ag-grid控件中获取想法，该文件可参考，ag-grid利用css3不兼容ie8，已换成别的想法支持
纯css实现table滚动条(纯css实现div滚动条)
04-23
纯css实现table滚动条(纯css实现div滚动条),主要是通过设定高度/宽度及overflow:auto;实现.
bootstrap表格固定表头并且tbody部分添加滚动条
10-24
这样，当用户滚动内容时，表头始终保持可见，便于对照数据。本文将深入探讨如何实现Bootstrap表格的这一功能。 首先，要理解Bootstrap表格的基本结构。一个基本的Bootstrap表格由`<table>`标签开启，包含`<thead>`...
为table标签内的tbody添加滚动条
lihaofeifei的博客
11-23 9493
 CSS代码演示 table tbody { display:block; height:200px; //高度根据实际自定义 overflow-y:scroll; -webkit-overflow-scrolling: touch; // 为了滚动顺畅 } table tbody::-webkit-scrollbar { display: none...
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
通过css样式给表格tbody加垂直滚动条
weixin_30321709的博客
08-21 906
tbody加滚动条实现思路： 1，把tbody设置成display:block，然后就对其高度设置一个固定值，overflow设置成auto。 2，把thead的tr设置成display:block。 3，因为都设置成block所以要给td手动添加宽度。 4，考虑到 tbody 产生了滚动条，这时会影响tbody以及thead的宽度，可以采用针对tbody设置::-webkit-...
table表格，thead固定，tbody滚动条
Gleason
08-03 1万+
如上图所示 之前 写的样式 不变, 想让 thead 固定 不动, tbody 增加滚动条,在样式中添加如下代码   table tbody { display: block; height: 195px; overflow-y: scroll; } table thead, tbody tr { ...
tbody 加滚动条
08-30 1万+
在页面中给tbody加滚动条保持thead不动。<html> <head> <link rel="stylesheet" type="text/css" href="main.css"> </head> <body> <table class="table"> <thead> <tr> <th>head1</th> <th>head2</th> <th>head3</th> <th>head4</t
实现CSS固定表头的滚动内容表格教程
- 设计一个HTML表格结构，包括表头（thead）和表体（tbody）。 - 为表头设置一个CSS类（比如叫"fixed-header"），并设置position: sticky; top: 0;，这样表头就可以在滚动时保持在顶部。 - 为表格的表体设置...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值