固定Table标题栏

最新推荐文章于 2020-12-08 10:18:24 发布
最新推荐文章于 2020-12-08 10:18:24 发布
阅读量770 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/likg_java/article/details/40430799
版权 
<html>
<head>
<title>固定Table标题栏</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.js"></script>
<style type="text/css">
.dataTable{
	width: 100%;
	border-collapse:collapse;
	margin-bottom: 5px;
	color: #000000;
}
.dataTable .title{
	background-color: #99CCFF;
	text-align: center;
}
</style>
</head>
<body>
<div class="mainBody">
<h1>系统建议补货量</h1>
<hr/>

<!-- 固定标题 -->
<div id="fixedBox" style="display:block; width:100%; position:fixed; top:0px; z-index:99999;"></div>

<table border="1" class="dataTable" id="mainList">
<thead>
	<tr class="title">
  	  	<td rowspan="2"></td>
  	  	<td rowspan="2">商品编号</td>
  	  	<td rowspan="2">原名称</td>
  	  	<td rowspan="2">标签</td>
  	  	<td colspan="3">总计</td>
	</tr>
	<tr class="title">
		<td>库存<br>天数</td>
		<td>建议<br>补货量</td>
		<td>建议<br>调拨量</td>
	</tr> 
</thead>
<tbody>
	<tr align="center"><td>1</td><td>5003560</td><td align="left">1G容量U盘</td><td>隐藏</td><td>0</td><td>0</td><td>0</td></tr>
	<tr align="center"><td>1</td><td>5003560</td><td align="left">1G容量U盘</td><td>隐藏</td><td>0</td><td>0</td><td>0</td></tr>
	<tr align="center"><td>1</td><td>5003560</td><td align="left">1G容量U盘</td><td>隐藏</td><td>0</td><td>0</td><td>0</td></tr>
	<tr align="center"><td>1</td><td>5003560</td><td align="left">1G容量U盘</td><td>隐藏</td><td>0</td><td>0</td><td>0</td></tr>
	<tr align="center"><td>1</td><td>5003560</td><td align="left">1G容量U盘</td><td>隐藏</td><td>0</td><td>0</td><td>0</td></tr>
	<tr align="center"><td>1</td><td>5003560</td><td align="left">1G容量U盘</td><td>隐藏</td><td>0</td><td>0</td><td>0</td></tr>
	<tr align="center"><td>1</td><td>5003560</td><td align="left">1G容量U盘</td><td>隐藏</td><td>0</td><td>0</td><td>0</td></tr>
	<tr align="center"><td>1</td><td>5003560</td><td align="left">1G容量U盘</td><td>隐藏</td><td>0</td><td>0</td><td>0</td></tr>
	<tr align="center"><td>1</td><td>5003560</td><td align="left">1G容量U盘</td><td>隐藏</td><td>0</td><td>0</td><td>0</td></tr>
	<tr align="center"><td>1</td><td>5003560</td><td align="left">1G容量U盘</td><td>隐藏</td><td>0</td><td>0</td><td>0</td></tr>
	<tr align="center"><td>1</td><td>5003560</td><td align="left">1G容量U盘</td><td>隐藏</td><td>0</td><td>0</td><td>0</td></tr>
	<tr align="center"><td>1</td><td>5003560</td><td align="left">1G容量U盘</td><td>隐藏</td><td>0</td><td>0</td><td>0</td></tr>
	<tr align="center"><td>1</td><td>5003560</td><td align="left">1G容量U盘</td><td>隐藏</td><td>0</td><td>0</td><td>0</td></tr>
	<tr align="center"><td>1</td><td>5003560</td><td align="left">1G容量U盘</td><td>隐藏</td><td>0</td><td>0</td><td>0</td></tr>
	<tr align="center"><td>1</td><td>5003560</td><td align="left">1G容量U盘</td><td>隐藏</td><td>0</td><td>0</td><td>0</td></tr>
	<tr align="center"><td>1</td><td>5003560</td><td align="left">1G容量U盘</td><td>隐藏</td><td>0</td><td>0</td><td>0</td></tr>
	<tr align="center"><td>1</td><td>5003560</td><td align="left">1G容量U盘</td><td>隐藏</td><td>0</td><td>0</td><td>0</td></tr>
	<tr align="center"><td>1</td><td>5003560</td><td align="left">1G容量U盘</td><td>隐藏</td><td>0</td><td>0</td><td>0</td></tr>
	<tr align="center"><td>1</td><td>5003560</td><td align="left">1G容量U盘</td><td>隐藏</td><td>0</td><td>0</td><td>0</td></tr>
	<tr align="center"><td>1</td><td>5003560</td><td align="left">1G容量U盘</td><td>隐藏</td><td>0</td><td>0</td><td>0</td></tr>
	<tr align="center"><td>1</td><td>5003560</td><td align="left">1G容量U盘</td><td>隐藏</td><td>0</td><td>0</td><td>0</td></tr>
	<tr align="center"><td>1</td><td>5003560</td><td align="left">1G容量U盘</td><td>隐藏</td><td>0</td><td>0</td><td>0</td></tr>
	<tr align="center"><td>1</td><td>5003560</td><td align="left">1G容量U盘</td><td>隐藏</td><td>0</td><td>0</td><td>0</td></tr>
	<tr align="center"><td>1</td><td>5003560</td><td align="left">1G容量U盘</td><td>隐藏</td><td>0</td><td>0</td><td>0</td></tr>
	<tr align="center"><td>1</td><td>5003560</td><td align="left">1G容量U盘</td><td>隐藏</td><td>0</td><td>0</td><td>0</td></tr>
	<tr align="center"><td>1</td><td>5003560</td><td align="left">1G容量U盘</td><td>隐藏</td><td>0</td><td>0</td><td>0</td></tr>
	<tr align="center"><td>1</td><td>5003560</td><td align="left">1G容量U盘</td><td>隐藏</td><td>0</td><td>0</td><td>0</td></tr>
	<tr align="center"><td>1</td><td>5003560</td><td align="left">1G容量U盘</td><td>隐藏</td><td>0</td><td>0</td><td>0</td></tr>
	<tr align="center"><td>1</td><td>5003560</td><td align="left">1G容量U盘</td><td>隐藏</td><td>0</td><td>0</td><td>0</td></tr>
	<tr align="center"><td>1</td><td>5003560</td><td align="left">1G容量U盘</td><td>隐藏</td><td>0</td><td>0</td><td>0</td></tr>
	<tr align="center"><td>1</td><td>5003560</td><td align="left">1G容量U盘</td><td>隐藏</td><td>0</td><td>0</td><td>0</td></tr>
	<tr align="center"><td>1</td><td>5003560</td><td align="left">1G容量U盘</td><td>隐藏</td><td>0</td><td>0</td><td>0</td></tr>
	<tr align="center"><td>1</td><td>5003560</td><td align="left">1G容量U盘</td><td>隐藏</td><td>0</td><td>0</td><td>0</td></tr>
	<tr align="center"><td>1</td><td>5003560</td><td align="left">1G容量U盘</td><td>隐藏</td><td>0</td><td>0</td><td>0</td></tr>
	<tr align="center"><td>1</td><td>5003560</td><td align="left">1G容量U盘</td><td>隐藏</td><td>0</td><td>0</td><td>0</td></tr>
	<tr align="center"><td>1</td><td>5003560</td><td align="left">1G容量U盘</td><td>隐藏</td><td>0</td><td>0</td><td>0</td></tr>
	<tr align="center"><td>1</td><td>5003560</td><td align="left">1G容量U盘</td><td>隐藏</td><td>0</td><td>0</td><td>0</td></tr>
	<tr align="center"><td>1</td><td>5003560</td><td align="left">1G容量U盘</td><td>隐藏</td><td>0</td><td>0</td><td>0</td></tr>
	<tr align="center"><td>1</td><td>5003560</td><td align="left">1G容量U盘</td><td>隐藏</td><td>0</td><td>0</td><td>0</td></tr>
	<tr align="center"><td>1</td><td>5003560</td><td align="left">1G容量U盘</td><td>隐藏</td><td>0</td><td>0</td><td>0</td></tr>
	<tr align="center"><td>1</td><td>5003560</td><td align="left">1G容量U盘</td><td>隐藏</td><td>0</td><td>0</td><td>0</td></tr>
	<tr align="center"><td>1</td><td>5003560</td><td align="left">1G容量U盘</td><td>隐藏</td><td>0</td><td>0</td><td>0</td></tr>
</tbody>
</table>
</div>
<script type="text/javascript">
$(document).ready(function() {
	$(window).scroll(function(){
		//获取滚动条到顶部的垂直高度
		var st = $(document).scrollTop();
		//获取列表到页面顶部的距离
		var t = $('#mainList').offset().top;
		console.log(st + '--' + t);
		
		if(st > t){
			showFixedTitle(); //显示
		}else{
			$('#fixedBox').hide();
		}
	});
});

function showFixedTitle(){
	if($.trim($('#fixedBox').html()) == ''){
		var theadObj = $('#mainList').find('thead');
		$('#fixedBox').html('<table class="dataTable" border="1">'+ theadObj.html() +'</table>');
		
		var widthList = [];
		theadObj.find('td').each(function(i,dom){
			widthList.push($(dom).width());
		});
		$('#fixedBox table').find('td').each(function(i,dom){
			$(dom).width(widthList[i]);
		});
		$('#fixedBox table').width($('#mainList').width());
	}
	$('#fixedBox').show();
}
</script>
</body>
</html>

likg_java
关注
table表头行固定
xinyue3054的专栏
07-05 1万+
大鱼吃小雨，快鱼吃慢雨，市场竞争无比激烈的今天，谁不以客户为导向，以客户为中心，时刻为客户提供优质的服务，必然被市场无情的淘汰。        最近一个客户希望：一次性将所有的数据全部展示出来，不需要分页，且表头行固定。这种数据量不大，一次性全部展示具有直观、
HTML固定Table标题行的四种方法
08-31
Javascript脚本实现HTML页面中表格Table的标题行固定位置，并与表格内容对齐。
js 实现table标题固定
你好邱林和的专栏
10-20 2296
使用ScrollTableFixed插件可以很好的实现这一效果，他的github地址：https://github.com/doska80/ScrollTableFixed，demo地址如下：https://github.com/doska80/ScrollTableFixed/blob/master/ScrollTableFixed/index.html，
table固定行和表头
weixin_33885676的博客
07-27 74
View Code &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;he...
固定table 的标题行
weixin_30933531的博客
11-24 106
<html> <head> <style type="text/css"> <!-- body,table, td, a { font:9pt; } /*重点：固定行头样式*/ .scrollRowThead { position: relative; left: expression(...
jQuery实现固定表头标题栏让表格数据在滚动栏里滚动.zip
最新发布
11-18
为了解决这个问题，我们可以利用jQuery库来实现一个功能：固定表头标题栏，即使在滚动过程中也能保持可见。这个主题正是“jQuery实现固定表头标题栏让表格数据在滚动栏里滚动”的核心所在。 jQuery是一个轻量级、高...
html中table固定头部表格tbody可上下左右滑动
01-19
当表格头部固定时，需要分为两个表格来做：一部分是thead，一部分是tbody，具体实现方式如下： html代码： <div class=table_box_big> <div class=table_box> <table> <th><div>标题一</div></th> <th><div>...
网页模板——jQuery实现固定表头标题栏让表格数据在滚动栏里滚动.zip
11-23
"jQuery实现固定表头标题栏让表格数据在滚动栏里滚动"这一技术主题，就是解决这个问题的一种常见方法。jQuery是一个轻量级、高性能的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。在这里...
js表头固定,固定table标题行
11-15
jquery表头固定，有两种情况，请参照，jquery请自行附加，就不上传了。
html Table 表头固定的实现
09-22
主要介绍了html Table 表头固定的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
table左边固定-底部横向滚动条-demo
weixin_30858241的博客
07-05 360
图： 代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> &...
table锁定表头
07-29 169
本文介绍4种固定表头方式，效果如图： 方式一、使用两个table，.tHead作为表头，tBody包含表体； <style type="text/css"> *{margin:0; padding:0;} table{width:100%; table-layout:fixed; border-collapse: collapse;} tr{height:3...
table固定表头
码农一个
05-26 3936
在项目中用到了table表格，数据较多出现了滚动条随之出现的问题就是，滚掉条滚动的时候，table表头也被“滚”跑了。想要修改这个问题只好采用固定table的表头了。     固定表头一般都是一列表头，我这里是两列的表头，网上有类似的解决方法，不过我是采用的另一种方法。     查找的资料解决办法：   body,table, td, a { font:9
HTML基础-表格title标签
mnbvk098的博客
12-08 681
学习论坛 www.ailiteng.com https://www.ailiteng.com * 表格的基础 表格的特点 1. 简单通用 2. 结构稳定 表格的基本语法 `<table border="1"> <tr> <!-- tr标签 定义行 --> <td>1</td> <!-- 在没有制定单元格宽的的时候 系统会自适应大小 -->
HTML基础——table标签
NCU_tanghulu的博客
08-01 2706
HTML基础之table标签 一、定义 表格是网页中十分重要的组成元素。表格用来存储数据。表格包含标题、表头、行和单元格。在HTML语言中，表格标记使用符号<table>表示。定义表格仅使用<table>是不够的，还需要定义表格中的行、列、标题等内容。在HTML页面中定义表格，需要学会以下几个标记。 1.表格标记<table> <table>...</table> 标记表示整个表格。<table> 标记中有很多属性，例如width属性用
Table的title属性
wangqiuchen_Study的专栏
11-11 1669
Table固定标题 内容滚动
qingkaqingka的博客
06-18 831
如下代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/jquery.min.js"></script> &l...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值