HTML表头冻结

最新推荐文章于 2024-05-11 01:32:20 发布
最新推荐文章于 2024-05-11 01:32:20 发布
阅读量5.7k 收藏 5
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhexiaode/article/details/81698809
版权

####html冻结表头方案：

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery固定表头表格滚动数据效果</title>
 <style type="text/css">
        .fakeContainer
        {
            padding: 0px;
            border: none;
            left: 3px;
            top: 180px;
            width: 50%; /* 宽度 */
            height: 200px; /* 垂直高度，超过出现滚动条 */
            overflow: hidden; /* Required to set */
            /*overflow-y: auto;
            overflow-x: hidden; 可实现滚动条：竖着出现，横着不出现*/
        }
    </style>
	
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="superTables_compressed.js"></script> 
<link href="superTables_compressed.css" rel="stylesheet">

 <script>
 $(function(){
	new superTable("demoTable", {
					cssSkin: "sDefault",//表格皮肤，提供四套：sDefault、sOrange、sSky、sDark（黑背白字）
					headerRows:1,//冻结行数
					fixedCols:1//冻结列数
				});
 });
 </script>
	
</head>
<body>

    <div class="fakeContainer">
	<!--table的width必须100%才好-->
<table id="demoTable" style="margin: 0 auto; border: 1px solid #82B3C9;width:100%;margin-top: -5px;" class="sDefault sDefault-Main" cellpadding="0" cellspacing="0">
 
	<tr>
		<th>名称</th>
		<th>作者</th>
		<th>备注</th>
	</tr>
 
	<tr>
		<td>《啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊》</td>
		<td>啊啊啊啊</td>
		<td>啊啊啊啊付付付付付付付付付付付付付付付付</td>
	</tr>
	<tr>
		<td>《啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊》</td>
		<td>啊啊啊啊</td>
		<td>啊啊啊啊付付付付付付付付付付付付付付付付</td>
	</tr> <tr>
		<td>《啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊》</td>
		<td>啊啊啊啊</td>
		<td>啊啊啊啊付付付付付付付付付付付付付付付付</td>
	</tr><tr>
		<td>《啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊》</td>
		<td>啊啊啊啊</td>
		<td>啊啊啊啊付付付付付付付付付付付付付付付付</td>
	</tr><tr>
		<td>《啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊》</td>
		<td>啊啊啊啊</td>
		<td>啊啊啊啊付付付付付付付付付付付付付付付付</td>
	</tr><tr>
		<td>《啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊》</td>
		<td>啊啊啊啊</td>
		<td>啊啊啊啊付付付付付付付付付付付付付付付付</td>
	</tr><tr>
		<td>《啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊》</td>
		<td>啊啊啊啊</td>
		<td>啊啊啊啊付付付付付付付付付付付付付付付付</td>
	</tr><tr>
		<td>《啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊》</td>
		<td>啊啊啊啊</td>
		<td>啊啊啊啊付付付付付付付付付付付付付付付付</td>
	</tr><tr>
		<td>《啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊》</td>
		<td>啊啊啊啊</td>
		<td>啊啊啊啊付付付付付付付付付付付付付付付付</td>
	</tr><tr>
		<td>《啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊》</td>
		<td>啊啊啊啊</td>
		<td>啊啊啊啊付付付付付付付付付付付付付付付付</td>
	</tr><tr>
		<td>《啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊》</td>
		<td>啊啊啊啊</td>
		<td>啊啊啊啊付付付付付付付付付付付付付付付付</td>
	</tr><tr>
		<td>《啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊》</td>
		<td>啊啊啊啊</td>
		<td>啊啊啊啊付付付付付付付付付付付付付付付付</td>
	</tr>
</table></div>
 
</body>
</html>
  • superTables_compressed.js文件源码：
/* Super Tables v0.30 - MIT Style License --- Copyright (c) 2008 Matt Murphy, www.matts411.com --- Contributors: Joe Gallo */
/* Compressed with Dean Edwards' /Packer/ v3.0 --- http://dean.edwards.name/packer/ */
var superTable=function(tableId,options){options=options||{};this.cssSkin=options.cssSkin||"";this.headerRows=parseInt(options.headerRows||"2");this.fixedCols=parseInt(options.fixedCols||"0");this.colWidths=options.colWidths||[];this.initFunc=options.onStart||null;this.callbackFunc=options.onFinish||null;this.initFunc&&this.initFunc();this.sBase=document.createElement("DIV");this.sFHeader=this.sBase.cloneNode(false);this.sHeader=this.sBase.cloneNode(false);this.sHeaderInner=this.sBase.cloneNode(false);this.sFData=this.sBase.cloneNode(false);this.sFDataInner=this.sBase.cloneNode(false);this.sData=this.sBase.cloneNode(false);this.sColGroup=document.createElement("COLGROUP");this.sDataTable=document.getElementById(tableId);this.sDataTable.style.margin="0px";if(this.cssSkin!==""){this.sDataTable.className+=" "+this.cssSkin}if(this.sDataTable.getElementsByTagName("COLGROUP").length>0){this.sDataTable.removeChild(this.sDataTable.getElementsByTagName("COLGROUP")[0])}this.sParent=this.sDataTable.parentNode;this.sParentHeight=this.sParent.offsetHeight;this.sParentWidth=this.sParent.offsetWidth;this.sBase.className="sBase";this.sFHeader.className="sFHeader";this.sHeader.className="sHeader";this.sHeaderInner.className="sHeaderInner";this.sFData.className="sFData";this.sFDataInner.className="sFDataInner";this.sData.className="sData";var alpha,beta,touched,clean,cleanRow,i,j,k,m,n,p;this.sHeaderTable=this.sDataTable.cloneNode(false);if(this.sDataTable.tHead){alpha=this.sDataTable.tHead;this.sHeaderTable.appendChild(alpha.cloneNode(false));beta=this.sHeaderTable.tHead}else{alpha=this.sDataTable.tBodies[0];this.sHeaderTable.appendChild(alpha.cloneNode(false));beta=this.sHeaderTable.tBodies[0]}alpha=alpha.rows;for(i=0;i<this.headerRows;i++){beta.appendChild(alpha[i].cloneNode(true))}this.sHeaderInner.appendChild(this.sHeaderTable);if(this.fixedCols>0){this.sFHeaderTable=this.sHeaderTable.cloneNode(true);this.sFHeader.appendChild(this.sFHeaderTable);this.sFDataTable=this.sDataTable.cloneNode(true);this.sFDataInner.appendChild(this.sFDataTable)}alpha=this.sDataTable.tBodies[0].rows;for(i=0,j=alpha.length;i<j;i++){clean=true;for(k=0,m=alpha[i].cells.length;k<m;k++){if(alpha[i].cells[k].colSpan!==1||alpha[i].cells[k].rowSpan!==1){i+=alpha[i].cells[k].rowSpan-1;clean=false;break}}if(clean===true)break}cleanRow=(clean===true)?i:0;for(i=0,j=alpha[cleanRow].cells.length;i<j;i++){if(i===this.colWidths.length||this.colWidths[i]===-1){this.colWidths[i]=alpha[cleanRow].cells[i].offsetWidth}}for(i=0,j=this.colWidths.length;i<j;i++){this.sColGroup.appendChild(document.createElement("COL"));this.sColGroup.lastChild.setAttribute("width",this.colWidths[i])}this.sDataTable.insertBefore(this.sColGroup.cloneNode(true),this.sDataTable.firstChild);this.sHeaderTable.insertBefore(this.sColGroup.cloneNode(true),this.sHeaderTable.firstChild);if(this.fixedCols>0){this.sFDataTable.insertBefore(this.sColGroup.cloneNode(true),this.sFDataTable.firstChild);this.sFHeaderTable.insertBefore(this.sColGroup.cloneNode(true),this.sFHeaderTable.firstChild)}if(this.cssSkin!==""){this.sDataTable.className+=" "+this.cssSkin+"-Main";this.sHeaderTable.className+=" "+this.cssSkin+"-Headers";if(this.fixedCols>0){this.sFDataTable.className+=" "+this.cssSkin+"-Fixed";this.sFHeaderTable.className+=" "+this.cssSkin+"-FixedHeaders"}}if(this.fixedCols>0){this.sBase.appendChild(this.sFHeader)}this.sHeader.appendChild(this.sHeaderInner);this.sBase.appendChild(this.sHeader);if(this.fixedCols>0){this.sFData.appendChild(this.sFDataInner);this.sBase.appendChild(this.sFData)}this.sBase.appendChild(this.sData);this.sParent.insertBefore(this.sBase,this.sDataTable);this.sData.appendChild(this.sDataTable);var sDataStyles,sDataTableStyles;this.sHeaderHeight=this.sDataTable.tBodies[0].rows[(this.sDataTable.tHead)?0:this.headerRows].offsetTop;sDataTableStyles="margin-top: "+(this.sHeaderHeight*-1)+"px;";sDataStyles="margin-top: "+this.sHeaderHeight+"px;";sDataStyles+="height: "+(this.sParentHeight-this.sHeaderHeight)+"px;";if(this.fixedCols>0){this.sFHeaderWidth=this.sDataTable.tBodies[0].rows[cleanRow].cells[this.fixedCols].offsetLeft;if(window.getComputedStyle){alpha=document.defaultView;beta=this.sDataTable.tBodies[0].rows[0].cells[0];if(navigator.taintEnabled){this.sFHeaderWidth+=Math.ceil(parseInt(alpha.getComputedStyle(beta,null).getPropertyValue("border-right-width"))/2)}else{this.sFHeaderWidth+=parseInt(alpha.getComputedStyle(beta,null).getPropertyValue("border-right-width"))}}else if(/*@cc_on!@*/0){alpha=this.sDataTable.tBodies[0].rows[0].cells[0];beta=[alpha.currentStyle["borderRightWidth"],alpha.currentStyle["borderLeftWidth"]];if(/px/i.test(beta[0])&&/px/i.test(beta[1])){beta=[parseInt(beta[0]),parseInt(beta[1])].sort();this.sFHeaderWidth+=Math.ceil(parseInt(beta[1])/2)}}if(window.opera){this.sFData.style.height=this.sParentHeight+"px"}this.sFHeader.style.width=this.sFHeaderWidth+"px";sDataTableStyles+="margin-left: "+(this.sFHeaderWidth*-1)+"px;";sDataStyles+="margin-left: "+this.sFHeaderWidth+"px;";sDataStyles+="width: "+(this.sParentWidth-this.sFHeaderWidth)+"px;"}else{sDataStyles+="width: "+this.sParentWidth+"px;"}this.sData.style.cssText=sDataStyles;this.sDataTable.style.cssText=sDataTableStyles;(function(st){if(st.fixedCols>0){st.sData.onscroll=function(){st.sHeaderInner.style.right=st.sData.scrollLeft+"px";st.sFDataInner.style.top=(st.sData.scrollTop*-1)+"px"}}else{st.sData.onscroll=function(){st.sHeaderInner.style.right=st.sData.scrollLeft+"px"}}if(/*@cc_on!@*/0){window.attachEvent("onunload",function(){st.sData.onscroll=null;st=null})}})(this);this.callbackFunc&&this.callbackFunc()};
  • superTables_compressed.css文件源码：
/* Super Tables v0.30 - MIT Style License --- Copyright (c) 2008 Matt Murphy, www.matts411.com --- Contributors: Joe Gallo */
.sBase{position:relative;width:100%;height:100%;overflow:hidden;}
.sHeader{position:absolute;z-index:3;background-color:#eeeeee;}
.sHeaderInner{position:relative;}
.sHeaderInner table{border-spacing:0px 0px !important;border-collapse:collapse !important;width:1px !important;table-layout:fixed !important;background-color:#ffffff;}
.sFHeader{position:absolute;z-index:4;overflow:hidden;}
.sFHeader table{border-spacing:0px 0px !important;border-collapse:collapse !important;width:1px !important;table-layout:fixed !important;background-color:#ffffff;}
.sData{position:absolute;z-index:2;overflow:auto;background-color:#ffffff;}
.sData table{border-spacing:0px 0px !important;border-collapse:collapse !important;width:1px !important;table-layout:fixed !important;}
.sFData{position:absolute;z-index:1;background-color:#eeeeee;}
.sFDataInner{position:relative;}
.sFData table{border-spacing:0px 0px !important;border-collapse:collapse !important;width:1px !important;table-layout:fixed !important;}
/* Super Tables - Skin Classes - Remove if not needed */
.sDefault{margin:0px;padding:0px;border:none;font-family:Verdana, Arial, sans serif;font-size:12px;}
.sDefault th, .sDefault td{border:1px solid #cccccc;padding:3px 6px 3px 4px;white-space:nowrap;}
.sDefault th{background-color:#e5e5e5;border-color:#c5c5c5;}
.sDefault-Fixed{background-color:#eeeeee;border-color:#c5c5c5;}
.sSky{margin:0px;padding:0px;border:none;font-family:Verdana, Arial, sans serif;font-size:12px;}
.sSky th, .sSky td{border:1px solid #9eb6ce;padding:3px 6px 3px 4px;white-space:nowrap;}
.sSky th{background-color:#CFDCEE;}
.sSky-Fixed{background-color:#e4ecf7;}
.sOrange{margin:0px;padding:0px;border:none;font-family:Verdana, Arial, sans serif;font-size:12px;}
.sOrange th, .sOrange td{border:1px solid #cebb9e;padding:3px 6px 3px 4px;white-space:nowrap;}
.sOrange th{background-color:#ECD8C7;}
.sOrange-Fixed{background-color:#f7ede4;}
.sDark{margin:0px;padding:0px;border:none;font-family:Verdana, Arial, sans serif;font-size:12px;color:#ffffff;}
.sDark th, .sDark td{border:1px solid #555555;padding:3px 6px 3px 4px;white-space:nowrap;}
.sDark th{background-color:#000000;}
.sDark-Fixed{background-color:#222222;}
.sDark-Main{background-color:#333333;}

table表头-表列固定：iscroll-probe.min.js——github资源。

  • iScroll是一个高性能，资源占用少，无依赖，跨平台的javascript上拉加载，下拉刷新的滚动插件。
  • iScroll典型的应用场景位于移动设备的App。
  • Cordova/Phonegap + JQM + iScroll开发移动设备上的App，对于以数据呈现为主体的企业应用来讲无疑是一个多快好省的解决方案。
  • iScroll 5 API 中文版
anj3
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html表头冻结行列.rar
07-04
这个"html表头冻结行列.rar"压缩包就提供了一个简单实现这一功能的例子。 压缩包内的"html锁定表头冻结行列.html"文件，是一个包含JavaScript代码的HTML文件，它的核心原理是通过监听窗口滚动事件，动态调整表头的...
html锁定表头冻结行列
01-15
html锁定表头冻结行列html锁定表头冻结行列html锁定表头冻结行列html锁定表头冻结行列
html冻结首行标题栏最简单方法
1002710030
04-24 638
【代码】html冻结首行标题栏最简单方法。
HTML table标签实现表头固定
最新发布
2301_78416672的博客
05-11 292
表头表头表头表头表头内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容。
原生html冻结表头,CSS如何实现表头冻结效果
weixin_39525255的博客
06-03 137
复制代码代码如下:Pure CSS Scrollable Table with Fixed HeaderHeader 1Header 2Header 3Cell Content 1Cell Content 2Cell Content 3More Cell Content 1More Cell Content 2More Cell Content 3Even More Cell Content 1E...
冻结html表格标题列,jQuery实现冻结表头的方法
weixin_32571169的博客
06-17 424
本文实例讲述了jQuery实现冻结表头的方法。分享给大家供大家参考。具体如下：前段时间做项目时候由于需要显示一个列表，但是由于数据太多在滚动的时候表头必须冻结住，所以就写了下面这个脚本(曾经在网上也找过相应的脚本，但是不怎么理想所以就自己写了，但是目前由于项目仅仅用到了表头的冻结，而不需要指定列冻结所以目前只能算个不完整的脚本，不过一般的仅仅需要表头冻结就可以使用了)，现在先看看截图：这样实现了表...
原生html冻结表头,Table冻结表头示例代码
weixin_35812176的博客
06-03 335
Table冻结表头：function fixupFirstRow(tab) {var div=tab.parentNode;if(div.className.toLowerCase()=="freezediv"){tab.rows[0].style.zIndex="1";tab.rows[0].style.position="relative";div.onscroll = function(){...
html table表冻结表头
hahaowenGG的博客
05-20 1329
<html> <head> <title>表格冻结实现</title> <meta charset="utf-8"> </head> <style type="text/css"> .table > tbody > tr > td, .table > tbody > tr > th, .table > thead > tr > t.
原生html冻结表头,html – 可滚动div内的冻结表头
weixin_34684705的博客
06-03 102
这是使用javascript的基本解决方案：function position(table) {table.rows[0].style.position="absolute";table.rows[0].style.top="0px";table.style.marginTop = table.rows[0].clientHeight/1.2;var widths = Array();for(va...
HTML冻结表头与侧边栏，表格内容可编辑
weixin_39927443的博客
12-29 1486
HTML冻结表头与侧边栏，表格内容可编辑 制作过程 其实表头的固定就相当于使用两个表格，一个在上面，一个在下面，上下排列，下面的表格容器可以滚动，上面的只有表头一行，为了让两个表格各列的宽度一致，可以获取下面表格各列的宽度，然后给上面表格添加对应的width，下面的代码是事例，浏览器可以运行 表格列可以将一个input放入td，这样就可以编辑表格内容，通过focus和blur可以为单元格添加不同的...
html冻结div,html – 可滚动div内的冻结表头
weixin_32427105的博客
06-15 382
这是使用javascript的基本解决方案：function position(table) {table.rows[0].style.position="absolute";table.rows[0].style.top="0px";table.style.marginTop = table.rows[0].clientHeight/1.2;var widths = Array();for(va...
Table冻结表头示例代码
09-05
本文将详细解释如何使用JavaScript和HTML实现一个简单的表格冻结表头的功能。 首先，我们需要理解HTML表格的基本结构。一个基本的表格由`<table>`标签定义，包含`<thead>`（表头）、`<tbody>`（表格主体）和`...
jQuery实现冻结表头的方法
10-24
这就是所谓的“冻结表头”功能。jQuery 提供了一种灵活的方式来实现这一需求，通过扩展 jQuery 对象的方法来创建一个能够冻结表头的插件。以下是一个关于如何使用 jQuery 实现冻结表头的详细说明。 首先，我们了解 ...
bootstrap冻结表头所需css与js.rar
03-16
在处理大型数据表格时，为了保持用户界面的友好性和可读性，常常需要实现表头冻结的功能，即在滚动表格内容时，表头始终保持可见。本压缩包“bootstrap冻结表头所需css与js.rar”提供了实现这一功能所需的CSS样式...
用iframe方式为页面加载完毕前显示等待提示
热门推荐
anjun_xf的专栏
08-31 1万+
需求：b.aspx是个大页面要加载很多数据，加载期间会假死一会，页面一片空白啥也不能操作，为了更好的用户体验，怎么在页面上加上“请等待”的提示呢？ 思路：使用iframe开发模拟AJAX，步骤：父页面（有等待提示）嵌iframe；iframe加载完毕后用js隐藏父页面的提示。 代码 父页面代码： &amp;amp;amp;amp;amp;amp;lt;meta charset=&amp;amp;amp;amp;amp;quot;utf-8&amp;amp;amp;amp;am
jQuery Excel插件：jQuery.jexcel.js单元格内容转json
anjun_xf的专栏
07-24 4491
&amp;amp;amp;lt;script src=&amp;amp;quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js&amp;amp;quot;&amp;amp;amp;gt;&amp;amp;amp;lt;/script&amp;amp;amp;gt; &amp;amp;amp;lt;script src=&amp;amp;quot;http://
chrome的F12（开发者工具）介绍
anjun_xf的专栏
12-09 3142
视频chrome f12调试功能笔记： Elements，调试“HTML、CSS”多在此操作。前端设计师用的多。 选中一个页面元素，然后右键copy outerHTML，获得选中元素及其子元素的html代码，copy seletor获得选中元素的css层次选择器。 Styles选项卡，可以直接修改元素样式并立刻看效果。 NetWork，查看页面上引用的所有的各类资源URL（all–...
AlaSQL
anjun_xf的专栏
10-28 2431
AlaSQL-是一个轻量级的客户端内存SQL数据库，旨在在浏览器和Node.js中使用。 AlaSQL使用纯JavaScript编写，不使用浏览器WebSQL数据库。 AlaSQL是一个功能齐全的紧凑型sql服务器，具有JOIN，GROUP，UNION，ANY，ALL，IN，、子查询和非常有限的事务支持。 AlaSQL支持ROLLUP(), CUBE() 和 GROUPING SETS()...
HTML实现冻结表格效果
标题中提到的“html冻结表格”是指在HTML页面中创建一个表格，通过JavaScript或者CSS来实现横纵滚动时保持部分单元格（通常是表头）固定不动的效果，使得用户在查看大量数据时能更容易地识别列标题和行标题。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值