HTML表头冻结

编程语言 2018-08-16 10:40:56 阅读次数: 0

html冻结表头方案：

  • HTML Table锁定表头（CSS实现）–可以但是不傻瓜，需要写两个table。
  • 表头冻结–纯jQuery，支持横、竖出现滚动条
  • jquery固定表头不滚动让内容滚动的代码实现——里面jQuery可以放到js文件引用，此版最接近实际需求，不用加太多css。如果没有可以通过key“Praesent vitae ligula nec orci pretium vestibulum”在百度上搜索到。
  • 使用superTables_compressed.js实现冻结标题。
    • 例子（例子中js和css文件源码在文档最下面贴出），注意：此插件使用时，table中“thead、tbody”可以不使用，如果使用则必须一起用，否则会发生js异常。
<!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;}

猜你喜欢

转载自blog.csdn.net/zhexiaode/article/details/81698809
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
基本数据类型封装类比较 Java源码解读(一) 8种基本类型对应的封装类型
JS实现无缝滚动上
深入解析HashMap原理（基于JDK1.8）
mysql的连接池
关于.htc
linux下的ubuntu12.04图形界面
【数论】好推不好记的扩展欧几里德
设备树详解
cscope + tags 简单设置
xml学习
每日归档
更多
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022