html 控制表格Tbody内容滚动

最新推荐文章于 2025-10-10 14:38:41 发布
原创 最新推荐文章于 2025-10-10 14:38:41 发布 · 4k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#表格 html tbody thead

本文介绍了一种解决HTML表格中tbody内容超出后实现滚动的方法。通过调整thead和tbody的display属性为block，并设置tbody的高度和td的宽度，可以使得表格内容在不破坏布局的情况下实现滚动效果。
部署运行你感兴趣的模型镜像

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


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


thead 和 tbody 都设置display：block；


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


到此完美解决!

您可能感兴趣的与本文相关的镜像

Kotaemon

Kotaemon

AI应用

Kotaemon 是由Cinnamon 开发的开源项目，是一个RAG UI页面,主要面向DocQA的终端用户和构建自己RAG pipeline

table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法
08-29
table表格，让thead固定，tbody有滚动条， 关键是都对齐的纯css写法关键是都对齐的纯css写法
大量数据html页面表格滚动显示
03-08
可从后台写循环获取上万数据，赋值到js全局变量，每次滚动显示所需分页数据，不会一次性显示大数据量导致页面滚动卡死，从ag-grid控件中获取想法，该文件可参考，ag-grid利用css3不兼容ie8，已换成别的想法支持
大屏实现table 自动滚动方案
最新发布
qq_45651453的博客
10-10 231
dv-scroll-board 、vue-seamless-scroll
CSS设置table下tbody的滚动条的实现
09-22
主要介绍了CSS设置table下tbody的滚动条的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
HTML table表格 固定表头 tbody加滚动条
沐枫
12-31 2万+
纯CSStable表格thead固定tbody滚动效果 由于项目需要，在表格中，当数据量越来越多时，就会出现滚动条，而在滚动的过程中，默认情况下表格头部会跟着表格内容一起滚动，导致看不到头部对应的字段名，影响体验效果！ 实现思路： 将内容要滚动的区域控制在 tbody 标签中添加 overflow-y:auto; 样式，给 tr 标签添加table-layout:fixed;...
table滚动tbody
qq_36971710的博客
07-09 1583
table tbody { display:block; height:500px; overflow-y:scroll; -webkit-overflow-scrolling: touch; // 为了滚动顺畅 } table tbody::-webkit-scrollbar { display: none; // 隐藏滚动条 } table thead, tbody tr { display:...
精选资源
html中table固定头部表格tbody可上下左右滑动
01-19
当表格头部固定时，需要分为两个表格来做：一部分是thead，一部分是tbody，具体实现方式如下： html代码： <th><div>标题一</div></th> <th><div>标题二</div></th> <th><div>标题三</div></th> <th>...
bootstrap表格固定表头并且tbody部分添加滚动条
10-24
这样，当用户滚动内容时，表头始终保持可见，便于对照数据。本文将深入探讨如何实现Bootstrap表格的这一功能。 首先，要理解Bootstrap表格的基本结构。一个基本的Bootstrap表格由`<table>`标签开启，包含`<thead>`...
Bootstrap表格实现表头固定及tbody滚动功能
07-03
为了提升用户体验，我们常需在表格的<tbody>部分添加竖向滚动条，同时让表头固定不动。这样，用户在滚动查看内容时，表头始终可见，便于对照数据。本文将深入探讨如何实现这一功能。 首先，要了解Bootstrap表格的...
完美tbody滚动效果
There is no one l would rather be than me
01-08 958
效果图： 源码： <!DOCTYPE html> <html> <head> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } .mytable{ width: 800px; background-col.
table设置tbody滚动条
G_ruirui的博客
01-13 1810
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; } t
纯css实现table滚动条(纯css实现div滚动条)
04-23
纯css实现table滚动条(纯css实现div滚动条),主要是通过设定高度/宽度及overflow:auto;实现.
CSS 给 table 的 tbody加滚动条
weixin_45062076的博客
04-10 683
table tbody { height: 200px; overflow-y: auto; display: block; } table thead, tbody tr { display: table; width: 100%; }
为table标签内的tbody添加滚动条
lihaofeifei的博客
11-23 9591
 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 919
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
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值