tbody 实现无错位的滚动条

最新推荐文章于 2024-06-17 16:30:49 发布
最新推荐文章于 2024-06-17 16:30:49 发布
阅读量360 收藏
点赞数
分类专栏： 前端html js css 文章标签： html css js web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liu137756/article/details/104614595
版权
本文介绍了如何在HTML中使用tbody元素实现一个滚动条，同时保持表格内容与滚动条位置正确对齐，主要涉及HTML、CSS和JavaScript技术。
摘要由CSDN通过智能技术生成 
<table border="0" cellpadding="1" cellspacing="0" style="margin-left: 1%;">
		<tr><td colspan="3">
			<div style="margin:0px;padding:0px;width:auto;">
				<table id="titleTable" border="0" cellpadding="0" cellspacing="0" style="table-layout: fixed;width: 100%;padding: 0;">
					<tr bgcolor="#E6E6E6">
						<td align="left" bgcolor="#EEEEEE" style="width: 70px;" nowrap="nowrap">
							标题1
						</td>
						<td align="left" bgcolor="#EEEEEE" style="width: 70px;" nowrap="nowrap">
							标题2
						</td>
						<td align
最低0.47元/天 解锁文章
liu137756
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
tbody 滚动条设置
weixin_34221036的博客
11-29 4615
文章介绍了如何将滚动条设置在tbody标签上，并且表格整体和未设置滚动条一致；此外补充了一些table的冷门姿势。 How to set tbody height with overflow scroll 问题demo 解决问题demo 要想给tbody一个超出的滚动条，其实只需要给tbody设置一个固定height，以及overflow:auto也就是超出添加滚动条。但是table固有的disp...
table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法
08-29
table表格，让thead固定，tbody有滚动条， 关键是都对齐的纯css写法关键是都对齐的纯css写法
table下tbody滚动条与thead对齐的方法且每一列可以不均等
weixin_30399821的博客
12-21 731
1 前言 table下tbody滚动条与thead对齐的方法，开始在tbody的td和thead的tr>td，对每一个Item加入百分比，结果是没对齐。也尝试了用bootstrap的col-md-1等来对齐，也是对不齐。然后只能网上查找答案了，就只需看用CSS来控制样式即可达到目的 2 代码 核心代码： <style> table tbody { ...
表格table的thead固定，tbody显示滚动条，滚动条不占位
AliceWu的博客
01-03 7067
在书写项目的时候，当给tbody加滚动条时由于滚动条会占位，总是出现表格边框不对齐有错位的效果呢，如下图 <table class="table_cell"> <div> <thead> <tr class="tr1"> <th>申请日期</th> <th>订单号<
＜tbody＞出现滚动条后，同＜thead＞对不齐的解决方案
最新发布
ElectronStorm的专栏
06-17 430
第四步，编写js，当表体.scrollHeight > 表体.clientHeight时，表明出现了滚动条，则为表头添加scroll-thead样式，同时为表格整体添加scroll-table样式。否则就为表头添加.no-scroll-thead样式，同时为表格整体添加no-scroll-table样式即可。如上处理后，表头和表体能对齐，但如果表体出现滚动条，两者就会对不齐了。第一步，将table和thead分别加上ref（refTable, refTHeader)需求是需要表格滚动，并且表头不动。
bootstrap表格固定表头并且tbody部分添加滚动条
10-24
bootstrap的tbody加竖向滚动条，而且当前表格的表头。bootstrap的tbody加竖向滚动条，而且当前表格的表头。bootstrap的tbody加竖向滚动条，而且当前表格的表头。
可滚动的 tbody
张营的技术博客
09-28 285
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .fixed_header{ width: 400px; } .fixed_header thead { backgro
table给tbody设置滚动条
qq_37866866的博客
06-12 1468
代码如下：(数据DeviceList、funcName等字段可直接删除，只是做多数据的展示，根据自己的数据进行修改)将table的thead和tbody分成两个table，并将tbody的table用div包起来。用得最多，也比较好的方案。
tbody超长显示滚动条
Knight_Key的博客
01-18 1726
头文件加样式 <style> table tbody { display:block; height:195px; overflow-y:scroll; } table thead, tbody tr { display:table; width:100%; table-layout:fixed; } table thead { width: calc( 100% - 1...
bootstrap-table头部错位已完美解决
10-31
在Bootstrap框架中，表格是通过CSS浮动布局来实现的，如果在响应式设计中没有正确处理，尤其是在不同的屏幕尺寸下，就可能出现头部错位的情况。另外，当表格内容过多，导致需要滚动查看时，如果表格的固定列（fixed-...
table内容出现滚动条和表头对齐问题
05-09
然而，当表格内容过多导致无法在单个视窗内完全显示时，滚动条就会出现，这时表头对齐问题就显得尤为重要。为了解决"table内容出现滚动条和表头对齐问题"，我们需要深入理解表格布局、CSS样式控制以及可能涉及到的...
用css给tbody加垂直滚动条的具体思路及样式代码
09-22
给tbody加垂直滚动条的思路就是把tbody设置成display:block，然后就对其高度设置一个固定值，overflow设置成auto即可，下面有个不错的示例，大家可以参考下
解决layui表格的表头不滚动的问题
10-16
通过使用绝对布局，可以确保 div 具有独立的滚动条，只对 tbody 内容进行滚动。 3. 为了保持表头与表体列宽的一致性，我们需要为 tr 下的 th 和 td 设置相同的宽度。这可以通过 CSS 样式来实现，确保在滚动过程中，...
bootstrap-table实现表头固定以及列固定的方法示例
10-17
这可能是因为表格内容较少而未能触发表格滚动，导致视觉上的错位。添加足够多的数据或调整样式可以解决此问题。 总之，要实现bootstrap-table的表头和列固定功能，核心在于引入正确的库文件，并且使用bootstrap-...
table表格的thead固定，tbody展示出滚动条
m0_66226018的博客
12-12 1544
我也是做了两次的table表格的thead固定，tbody展示出滚动条，第一次因为是存在有表头合并的原因没有做出来完好的效果，第二次是不仅有表头的合并，还有tbody中的rowspan的合并。
HTML table表格 固定表头 tbody加滚动条
热门推荐
沐枫
12-31 2万+
纯CSStable表格thead固定tbody滚动效果 由于项目需要，在表格中，当数据量越来越多时，就会出现滚动条，而在滚动的过程中，默认情况下表格头部会跟着表格内容一起滚动，导致看不到头部对应的字段名，影响体验效果！ 实现思路： 将内容要滚动的区域控制在 tbody 标签中添加 overflow-y:auto; 样式，给 tr 标签添加table-layout:fixed;...
通过css样式给表格tbody加垂直滚动条
weixin_30321709的博客
08-21 852
tbody加滚动条实现思路： 1，把tbody设置成display:block，然后就对其高度设置一个固定值，overflow设置成auto。 2，把thead的tr设置成display:block。 3，因为都设置成block所以要给td手动添加宽度。 4，考虑到 tbody 产生了滚动条，这时会影响tbody以及thead的宽度，可以采用针对tbody设置::-webkit-...
原生table标签在tbody添加滚动条
SmallGirlYang的博客
11-27 1148
js 动态创建表格数据。
tbody单独有滚动条
04-05
但是可以通过设置 `tbody` 的样式来实现 `tbody` 单独有滚动条。 具体实现方法如下： 1. 首先，需要将 `table` 元素的样式设置为 `position: relative`，这样 `tbody` 元素才能相对于 `table` 元素设置绝对定位。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值