HTML表头冻结

最新推荐文章于 2024-04-28 14:57:52 发布
最新推荐文章于 2024-04-28 14:57:52 发布
阅读量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冻结首行标题栏最简单方法
1002710030
04-24 628
【代码】html冻结首行标题栏最简单方法。
冻结html表格标题列,jQuery实现冻结表头的方法
weixin_32571169的博客
06-17 422
本文实例讲述了jQuery实现冻结表头的方法。分享给大家供大家参考。具体如下：前段时间做项目时候由于需要显示一个列表，但是由于数据太多在滚动的时候表头必须冻结住，所以就写了下面这个脚本(曾经在网上也找过相应的脚本，但是不怎么理想所以就自己写了，但是目前由于项目仅仅用到了表头的冻结，而不需要指定列冻结所以目前只能算个不完整的脚本，不过一般的仅仅需要表头冻结就可以使用了)，现在先看看截图：这样实现了表...
学习使用html中table实现内容滚动下拉表头和左右滑动前四列固定不动的方法代码整理
最新发布
徊忆羽菲
04-28 1458
学习使用html中table实现内容滚动下拉表头和左右滑动前四列固定不动的方法代码整理
html表头冻结行列.rar
07-04
html表头冻结行列，非常简单的实现，只有一个html 文件包含了一些js代码。
HTML 表格滚动锁定表头，实现固定行列
热门推荐
qq_25775675的博客
04-01 1万+
这个案例主要实现了表格在横向滚动或者纵向滚动时可以锁定表格的头部。 主要 css 代码在 style 标签下，还有就是表格外层的div也设置了绝对布局，这样可以将内部表格的高度设置为100%，否则就需要设置一个固定高度。
HTML冻结表头与侧边栏，表格内容可编辑
weixin_39927443的博客
12-29 1484
HTML冻结表头与侧边栏，表格内容可编辑 制作过程 其实表头的固定就相当于使用两个表格，一个在上面，一个在下面，上下排列，下面的表格容器可以滚动，上面的只有表头一行，为了让两个表格各列的宽度一致，可以获取下面表格各列的宽度，然后给上面表格添加对应的width，下面的代码是事例，浏览器可以运行 表格列可以将一个input放入td，这样就可以编辑表格内容，通过focus和blur可以为单元格添加不同的...
原生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锁定表头冻结行列
01-15
html锁定表头冻结行列html锁定表头冻结行列html锁定表头冻结行列html锁定表头冻结行列
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样式...
html锁定表头冻结行列兼容多浏览器
07-13
html 锁定表头 冻结行列 兼容 多浏览器 仿excel 测试兼容ie8, 火狐firefox, chrome
HTML,JSP,JQ,JS冻结表单的表头和侧栏；
11-24
HTML,JSP,JQ,JS冻结表单的表头和侧栏；表头冻结；固定表头；冻结表单； 简单实用；累死EXCEL那样的冻结；浏览器兼容；
冻结左边表头（HTML）
06-03
冻结左边表头,需要冻结的地方就加class样式。
冻结表格模板html,Excel冻结单元格（锁定单元格）用选项和快捷键，含冻结一个、多个和有公式的单元格及冻结表格格式不能输入...
weixin_39616071的博客
06-28 1995
在 Excel 中，冻结单元格既可用 Excel 内容的选项，又可以用快捷键。既可以冻结一个单元格又可以冻结多个单元格(包含只冻结有公式的单元格)，既可以冻结一行一列又可以冻结多行多列，并且能冻结整个表格。无论是冻结单元格还是冻结行列，方法都一样，只要选中它们即可。如果要求只冻结表格格式(即结构)，也就是不能再设置单元格格式(包括固定行高列宽、不能设置字体、颜色、加粗、下划线等)，只允许向单元格输...
html怎么设置冻结表格,如何在HTML表格上复制“冻结窗格”功能？
weixin_29163797的博客
07-04 725
我构建了一些有点类似的东西，但不太复杂：我希望表格(标题)的第一行在数据行垂直滚动时被冻结。我将它实现为2个不同的表格，每个表格都有固定宽度的单元格，每个表格都有自己的DIV。 “header”div只是静态的，“body”div使用overflow：auto来滚动。你的问题更复杂，因为你想在两个轴上“冻结窗格”，并支持在两个轴上滚动(我有更多的房地产可以使用，并且不必考虑水平滚动完全)。不过，我...
html表头跟随滚动,JS实现table表格固定表头且表头随横向滚动而滚动_心善_前端开发者...
weixin_32467749的博客
06-07 792
先看一张效果图思路：1、头部用一个table并用一个div包裹着， 表格的具体内容用一个table2、头部外面的div用positon: relative相对定位3、获取整个表格的高度4、获取表格的dom(或者包裹着表格的dom)距离页面顶部的距离 offsetTop5、滚动的零界点的距离 表格的高度+表格距离页面顶部的距离 如果滚动超过这个 就让头部的top值归0或原封不动当然还有很多可以优化的...
html table 表头停留,HTML table固定表头
weixin_42393272的博客
06-17 594
最近尝试了几种HTML的table固定表头的方法..额...各有利弊,但很尴尬.....1.thead和tbody的display设置为block;这种可以实现,但是需要提前设置好每个th和td的宽度,否则th和对应的td会错开,无法对齐;2.用两个table模拟,第一个作为thead,第二个作为tbody;需要动态设置单元格宽度,基本上满足需求,但是在firefox中,会有一点点瑕疵,单元格边框...
冻结html表格标题列,HTML表格冻结第一列 | 学步园
weixin_33215370的博客
07-01 338
基于jquery. 不说话, 看代码.Welcome to schedule main pagehtml, body{margin: 0;padding: 0;height: 100%;background-color: #fff;font-size: 10pt;font-family: Arial, verdana;}#pagewraper{width: 1000px;margin: 0 aut...
easyexcel冻结表头
11-02
EasyExcel可以通过注册ExcelFreezeHeaderStrategy来冻结表头。在导出时，可以使用以下代码来实现表头冻结： ``` .registerWriteHandler(new ExcelFreezeHeaderStrategy(1)) //冻结第一行表头 ``` 其中，1表示要冻结的行数。如果要冻结多行表头，可以将1改为需要冻结的行数。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值