纯css 冻结table表头

最新推荐文章于 2023-03-28 17:56:05 发布
最新推荐文章于 2023-03-28 17:56:05 发布
阅读量2.1k 收藏 2
点赞数 1
分类专栏： html 文章标签： css html table 冻结表头
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SuperMarkx/article/details/84940675
版权

今天想将一个前台页面设计的一个小东西分享一下，那就是平时我们设计表格的时候，通常都想将表格的头部进行固定，而表格的body部分能够进行滚动的效果，这个实现起来相对简单的，对于初学div+css布局的同学来说，还是有些帮助的。

这个表格很宽，可以左右滑动。

HTML部分

<div style="overflow:scroll;">
		<div style="width:8000px;position:relative;">
			<div id="mainTableBox" style="width: 8000px;height:400px;overflow-y: auto;">
			    <table style="width: 7980px" id="mainTable" border="0" width="90%" cellspacing="0"  cellpadding="0">
			    	<thead>
			    		<tr>
			    			<th rowspan="3" colspan="12">基本信息</th>
			    			<th rowspan="4" style="width: 2.5%">预领月数</th>
			    			<th colspan="25" rowspan="1">领款单明细</th>
			    			<th rowspan="4" style="width: 1.94%">备注</th>
			    			<th rowspan="4" colspan="2" style="width: 3.88%">操作</th>
			    		</tr>
			    		<tr>
			    			<th colspan="10">领款合计</th>
			    			<th colspan="9">应扣除合计</th>
			    			<th colspan="3">应领款合计</th>
			    			<th colspan="3">实际领款金额</th>
			    		</tr>
			    		<tr>
			    			<th rowspan="2" style="width: 2.5%">生活津贴</th>
			    			<th rowspan="2" style="width: 3.75%">一次性派遣补助</th>
			    			<th rowspan="2" style="width: 1.9%">123</th>
			    			<th rowspan="2" style="width: 3.75%">区补贴</th>
			    			<th colspan="3" style="width: 3.75%">应报销项</th>
			    			<th colspan="3">合计</th>
			    			<th colspan="3">国外教学</th>
			    			<th colspan="3">其他收入</th>
			    			<th colspan="3" >合计</th>
			    			<th colspan="3">合计</th>
			    			<th colspan="3">合计</th>
			    		</tr>
			    		<tr>
			    			<th style="width: 1.35%" rowspan="1">序号</th>
			    			<th style="width: 1.35%" rowspan="1">状态</th>
			    			<th style="width:2.5%" rowspan="1">岗位类型</th>
			    			<th style="width: 1.35%" rowspan="1">姓名</th>
			    			<th style="width: 1.89%" rowspan="1">出生地</th>
			    			<th style="width: 2.5%" rowspan="1">123</th>
			    			<th style="width: 2.5%" rowspan="1">456</th>
			    			<th style="width: 3.75%" rowspan="1">预计赴任时间</th>
			    			<th style="width: 3.75%" rowspan="1">预计离任时间</th>
			    			<th style="width: 1.35%" rowspan="1">任期</th>
			    			<th style="width: 6.5%" rowspan="1">个人提供生活津贴（人民币/月）</th>
			    			<th style="width: 6.5%" rowspan="1">公司提供生活津贴（人民币/月）</th>

			    			<th style="width: 1.94%">美元</th>
			    			<th style="width: 1.94%">人民币</th>
			    			<th style="width: 1.94%">其他金额</th>

			    			<th style="width: 1.94%">美元</th>
			    			<th style="width: 1.94%">人民币</th>
			    			<th style="width: 1.94%">其他金额</th>

			    			<th style="width: 1.94%">美元</th>
			    			<th style="width: 1.94%">人民币</th>
			    			<th style="width: 1.94%">其他金额</th>

			    			<th style="width: 1.94%">美元</th>
			    			<th style="width: 1.94%">人民币</th>
			    			<th style="width: 1.94%">其他金额</th>

			    			<th style="width: 1.94%">美元</th>
			    			<th style="width: 1.94%">人民币</th>
			    			<th style="width: 1.94%">其他金额</th>

			    			<th style="width: 1.94%">美元</th>
			    			<th style="width: 1.94%">人民币</th>
			    			<th style="width: 1.94%">其他金额</th>

			    			<th style="width: 1.94%">美元</th>
			    			<th style="width: 1.94%">人民币</th>
			    			<th style="width: 1.94%">其他金额</th>
			    			
			    		</tr>
			    	</thead>
			    	<tbody>
			    		<tr>
			    			<td colspan="41">data</td>
			    		</tr>
			    		<tr>
			    			<td colspan="41">data</td>
			    			
			    		</tr>
			    		<tr>
			    			<td colspan="41">data</td>
			    		</tr>
			    		<tr>
			    			<td colspan="41">data</td>
			    		</tr>
			    		<tr>
			    			<td colspan="41">data</td>
			    		</tr>
			    		<tr>
			    			<td colspan="41">data</td>
			    		</tr>
			    		<tr>
			    			<td colspan="41">data</td>
			    		</tr>
			    		<tr>
			    			<td colspan="41">data</td>
			    		</tr>
			    		<tr>
			    			<td colspan="41">data</td>
			    		</tr>
			    		<tr>
			    			<td colspan="41">data</td>
			    		</tr>

			    		

			    		<tr>
			    			<td>合计	</td>
			    			<td colspan="40"></td>
			    			
			    		</tr>
			    		<tr style="background: #fff">
			    			<td>备注</td>
			    			<td colspan="49"  style="text-align: left;">
			    				<textarea name="" rows="5" style="width:500px"></textarea>
			    			</td>
			    		</tr>
			    		


			    	</tbody>
			    </table>
		    </div>
		    <table style="width: 7980px" id="headTable" class="headTable" border="0" width="90%" cellspacing="0"  cellpadding="0">
			    <thead>
			    		<tr>
			    			<th rowspan="3" colspan="12">基本信息</th>
			    			<th rowspan="4" style="width: 2.5%">预领月数</th>
			    			<th colspan="25" rowspan="1">领款单明细</th>
			    			<th rowspan="4" style="width: 1.94%">备注</th>
			    			<th rowspan="4" colspan="2" style="width: 3.88%">操作</th>
			    		</tr>
			    		<tr>
			    			<th colspan="10">领款合计</th>
			    			<th colspan="9">应扣除合计</th>
			    			<th colspan="3">应领款合计</th>
			    			<th colspan="3">实际领款金额</th>
			    		</tr>
			    		<tr>
			    			<th rowspan="2" style="width: 2.5%">生活津贴</th>
			    			<th rowspan="2" style="width: 3.75%">一次性派遣补助</th>
			    			<th rowspan="2" style="width: 1.9%">安家费</th>
			    			<th rowspan="2" style="width: 3.75%">艰苦地区补贴</th>
			    			<th colspan="3" style="width: 3.75%">其他应报销项</th>
			    			<th colspan="3">合计</th>
			    			<th colspan="3">国外教学</th>
			    			<th colspan="3">其他收入</th>
			    			<th colspan="3" >合计</th>
			    			<th colspan="3">合计</th>
			    			<th colspan="3">合计</th>
			    		</tr>
			    		<tr>
			    			<th style="width: 1.35%" rowspan="1">序号</th>
			    			<th style="width: 1.35%" rowspan="1">状态</th>
			    			<th style="width:2.5%" rowspan="1">岗位类型</th>
			    			<th style="width: 1.35%" rowspan="1">姓名</th>
			    			<th style="width: 1.89%" rowspan="1">出生地</th>
			    			<th style="width: 2.5%" rowspan="1">任教国家</th>
			    			<th style="width: 2.5%" rowspan="1">地区类别</th>
			    			<th style="width: 3.75%" rowspan="1">预计赴任时间</th>
			    			<th style="width: 3.75%" rowspan="1">预计离任时间</th>
			    			<th style="width: 1.35%" rowspan="1">任期</th>
			    			<th style="width: 6.5%" rowspan="1">外方提供生活津贴（人民币/月）</th>
			    			<th style="width: 6.5%" rowspan="1">我办提供生活津贴（人民币/月）</th>

			    			<th style="width: 1.94%">美元</th>
			    			<th style="width: 1.94%">人民币</th>
			    			<th style="width: 1.94%">其他金额</th>

			    			<th style="width: 1.94%">美元</th>
			    			<th style="width: 1.94%">人民币</th>
			    			<th style="width: 1.94%">其他金额</th>

			    			<th style="width: 1.94%">美元</th>
			    			<th style="width: 1.94%">人民币</th>
			    			<th style="width: 1.94%">其他金额</th>

			    			<th style="width: 1.94%">美元</th>
			    			<th style="width: 1.94%">人民币</th>
			    			<th style="width: 1.94%">其他金额</th>

			    			<th style="width: 1.94%">美元</th>
			    			<th style="width: 1.94%">人民币</th>
			    			<th style="width: 1.94%">其他金额</th>

			    			<th style="width: 1.94%">美元</th>
			    			<th style="width: 1.94%">人民币</th>
			    			<th style="width: 1.94%">其他金额</th>

			    			<th style="width: 1.94%">美元</th>
			    			<th style="width: 1.94%">人民币</th>
			    			<th style="width: 1.94%">其他金额</th>
			    			
			    		</tr>
			    	</thead>	
			</table>
	    </div>
    </div>

CSS部分

* {
    	margin:0;
    	padding: 0;
    }

    table {
    	background: #dfdfdf;
    }
    table, th,td {
    	vertical-align: middle;
    	border-collapse:collapse;
    }
     th {
     	border: 1px solid #fff;
     	height: 40px;
     	color: #fff;
     	text-align: center;
     	border-collapse:collapse;
     	background: #1a61a3;
     }
     td {
     	padding: 5px 0;
     	text-align: center;
     	border: 1px solid #eee;
     	height: 40px;
     }

     .headTable {
     	width: 8000px;
     	position: absolute;
     	top: 0;
     }

这个功能主要思路：

1.两个table表格，第二个table表格作为冻结的表头，用绝对定位absolute（用固定定位position:fixed,表格左右滑动时表头不动）。

2.就是表格宽度比外层div的宽度少20像素，这样为了让出一个竖向滚动条的宽度。

3.设置两个表格th的宽度，保证两个表格每个单元格宽度一致。

SuperMarkx
关注
专栏目录
通过CSS样式锁定Table的首行首列
Only_Copy
09-05 1563
 对要锁定的行或列进行定位，设置z-index，关键语句expression，top:expression($("#OutDiv").scrollTop());通过某种机制，时刻调用，得到外层的div的滚动条scrollTop()坐标，设置该行的坐标。而expression为IE特有，但在IE8不在支持，可在开头加上&lt;meta http-equiv="X-UA-Compatible" con...
table冻结表头
03-12
一款简单方便的插件，轻松引入，即可调用。有中文注释，便于理解。
css 设置冻结表格头,纯CSS冻结表头
weixin_34640051的博客
08-03 607
css/* Colors *//* Bidirectional Table */div.frozen-table {width: 100%;min-height: 150px;overflow: scroll;margin: 0 auto;/* Remove the below 3 properties on your Website (Test-Purpose) */width: 800px;h...
css表格头部冻结
weixin_34151004的博客
03-29 246
/*表头冻结*/ .listFix table tbody{ display:block; /*height:195px;*/ overflow-y:scroll; } .listFix table thead, .listFix tbody tr{ display:table; width:100%; table-layout...
table表头冻结
月夜楓
10-16 2302
本文包含冻结title（thead），以及冻结前X列的实现废话不说，上代码：页面是这样的 出样数据展现 序号 店面编码 店面名称 型号 品类
纯 css 实现 table 冻结首列
最新发布
qq_38865642的博客
03-28 671
表格过大在移动端显示不完整时，需要滚动条滑动，接下来使用纯 css 来实现 table 冻结首列，更好的浏览表格内容。
Table冻结表头示例代码
09-05
在网页设计中，表头（thead）的冻结是常见的需求，尤其在处理大量数据时，保持表头固定以便用户在滚动查看内容时仍能清晰地看到列名。本文将详细解释如何使用JavaScript和HTML实现一个简单的表格冻结表头的功能。 ...
css冻结表头冻结第一列
12-11
css样式冻结表头，右侧滚动条滑动，表头锁定不动； css样式冻结首列，下侧滚动条滑动，首列锁定不动； 另外，表中首列添加了复选框，css样式，仅供参考学习，可以根据情况改动 适合菜鸟初学，大神高手会觉得简单绕行
bootstrap冻结表头所需css与js.rar
03-16
本压缩包“bootstrap冻结表头所需css与js.rar”提供了实现这一功能所需的CSS样式文件和JavaScript脚本。 首先，我们来看`bootstrap-table-fixed-header.js`。这个JavaScript文件是专门为Bootstrap表格设计的，它的...
css拼接表格，达到冻结列的效果
周末未至
09-08 1718
一、背景        项目中有一个表单填报，表单基本可分为左右两边，左边是一些基本评分规则（数量不固定），右边是一些被评分人（数量也不固定）。现在的需求就是，当被评分人数过多时，右边表格需要自动形成滚动条，可滚动评分，而此时左边评分规则不动。        当每一个评分因素评完分之后，需要自动计算该评分项的小计总分以及该被评分人的总计得分，且此处表格存在合并单元格的样式。  二、解决方案 ...
css冻结table
12-27
指定宽度下支持冻结，只需要加对应的样式class接
html锁定表头冻结行列
01-15
html锁定表头冻结行列html锁定表头冻结行列html锁定表头冻结行列html锁定表头冻结行列
单行或多行复杂的固定(冻结)表头的完美解决方案
05-09
自定义的用于处理GridView的固定(冻结)表头，单行或多行复杂表头不限，能兼容多种济览器版本，对tableLayout:fixed和auto这两种情况都是支持的。
固定table的thead表头
11-11
固定table的thead表头
table固定表头,css控制
08-20
两个例子table固定表头，用css实现，表头固定不动，表格内容随滚动条变化
Table冻结行列需要的CSS
weixin_34259559的博客
11-09 217
/*Fix Table Row and Col Style*/.fixLeftTop{     POSITION: relative;      Left: expression(this.offsetParent.scrollLeft-1);    TOP: expression(this.offsetParent.scrollTop-1);    z-index:103 ;}.fixTop{ ...
Css 实现的表头， 表列冻结， 可以超大数据量
jxdwuao的专栏
11-14 190
用了许多的表头， 表列的冻结插件， JS 实现的效果都不怎么理想 ，主要是性能上。现在找到了这个CSS实现的， 性能不错。 可以实现表头， 表列的冻结 ，比较理想。...
css 设置冻结表格头,固定/冻结行表头、列表头的做法
weixin_39628256的博客
08-03 1174
本文只讲思路和注意事项。本文的固定行表头、列表头要比某些网站的复杂些，因为他们讲的是一个窗口中只有要滚动的表格，而我们是一个窗口中有很多内容，其他内容区域不动，只有表格滚动，同时表格的表头也固定。固定行表头固定行表头相对来说要简单得多。1、将表格放一个 div 中，为这个表格设置高度(如果想做随窗口而变化的自动高度，就用 position:absolute; bottom:xxxpx;……)。为这...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值