表格头部header固定
Posted anne_zhou
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了表格头部header固定相关的知识，希望对你有一定的参考价值。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus?"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <link rel="stylesheet" href="css/tableStyle.css" /> <link rel="stylesheet" href="css/superTables.css" /> </head> <body> <div id="div_container" style="padding: 0 20px;text-align:center;"> <!-- 固定表头 table外层必须包有一个div id="my_div" class="fakeContainer first_div" 引入superTables.js 在页面下面还需要调用 --> <div id="my_div" class="fakeContainer first_div" style="padding:1px"> <table border="1" id="demoTable" style="margin-top:5px;border-collapse: collapse;"> <tr id="my_tr"> <th class="center" rowspan="2">A</th> <th class="center" rowspan="2">B</th> <th class="center" colspan="8">C</th> <th class="center" colspan="4">D</th> <th class="center" colspan="5">E</th> <th class="center" rowspan="2">F</th> </tr> <tr> <th class="center">G</th> <th class="center">H</th> <th class="center">I</th> <th class="center">J</th> <th class="center">K</th> <th class="center">L</th> <th class="center">M</th> <th class="center">N</th> <th class="center">O</th> <th class="center">P</th> <th class="center">Q</th> <th class="center">R</th> <th class="center">S</th> <th class="center">T</th> <th class="center">U</th> <th class="center">V</th> <th class="center">W</th> </tr> <tr> <td class="center" id="td">a</td> <td class="center">12</a></td> <td class="center">7</td> <td class="center">2</td> <td class="center">0</td> <td class="center">0</td> <td class="center">0</td> <td class="center">3</td> <td class="center">0</td> <td class="center">0</td> <td class="center">1</td> <td class="center">0</td> <td class="center">2</td> <td class="center">1</td> <td class="center">2744</td> <td class="center">1728</td> <td class="center">1634</td> <td class="center">1744</td> <td class="center">7850</td> <td class="center">208</td> </tr> <tr> <td class="center" id="td">b</td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> </tr> <tr> <td class="center" id="td">c</td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> </tr> <tr> <td class="center" id="td">d</td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> </tr> <tr> <td class="center" id="td">e</td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> </tr> <tr> <td class="center" id="td">f</td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> </tr> <tr> <td class="center" id="td">g</td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> </tr> <tr> <td class="center" id="td">h</td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> </tr> <tr> <td class="center" id="td">i</td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> </tr> <tr> <td class="center" id="td">j</td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> </tr> <tr> <td class="center" id="td">k</td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> </tr> <tr> <td class="center" id="td">l</td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> </tr> <tr> <td class="center" id="td">m</td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> </tr> <tr> <td class="center" id="td">n</td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> </tr> <tr> <td class="center" id="td">o</td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> </tr> <tr> <td class="center" id="td">p</td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> </tr> <tr> <td class="center" id="td">q</td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> </tr> <tr> <td class="center" id="td">r</td> <td class="center">12</td> <td class="center">7</td> <td class="center">2</td> <td class="center">0</td> <td class="center">0</td> <td class="center">0</td> <td class="center">3</td> <td class="center">0</td> <td class="center">0</td> <td class="center">1</td> <td class="center">0</td> <td class="center">2</td> <td class="center">1</td> <td class="center">2744</td> <td class="center">1728</td> <td class="center">1634</td> <td class="center">1744</td> <td class="center">7850</td> <td class="center">208</td> </tr> <tr> <td class="center" id="td">s</td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> </tr> <tr> <td class="center" id="td">t</td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> </tr> <tr> <td class="center" id="td">u</td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> </tr> <tr> <td class="center" id="td">v</td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> </tr> <tr> <td class="center" id="td">w</td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> </tr> <tr> <td class="center" id="td">x</td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> </tr> <tr> <td class="center" id="td">y</td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> </tr> <tr> <td class="center" id="td">z</td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> </tr> <tr> <td class="center" id="td">1</td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> </tr> <tr> <td class="center" id="td">2</td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> </tr> <tr> <td class="center" id="td">3</td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> </tr> <tr> <td class="center" id="td">4</td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> </tr> <tr> <td class="center" id="td">5</td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> </tr> <tr> <td class="center" id="td">6</td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> </tr> <tr> <td class="center" id="td">7</td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> </tr> <tr> <td class="center" id="td">8</td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> </tr> <tr> <td class="center" id="td">9</td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> </tr> <tr> <td class="center" id="td">10</td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> <td class="center"></td> </tr> </table> </div> </div> <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> <script type="text/javascript" src="js/superTables.js"></script> <script type="text/javascript"> //此处调用superTables.js里需要的函数 window.onload=function(){ new superTable("demoTable", {cssSkin : "sDefault", fixedCols : 1, //固定几列 headerRows :2, //头部固定行数 onStart : function () { this.start = new Date(); }, onFinish : function () { } }); $("#div_container").css("width","1000px");//这个宽度是容器宽度，不同容器宽度不同 $(".fakeContainer").css("height","400px");//这个高度是整个table可视区域的高度，不同情况高度不同 //.sData是调用superTables.js之后页面自己生成的 这块就是出现滚动条 达成锁定表头和列的效果 $(".sData").css("width","885px");//这块的宽度是用$("#div_container")的宽度减去锁定的列的宽度 $(".sData").css("height","325px");//这块的高度是用$("#div_container")的高度减去锁定的表头的高度 //目前谷歌 ie8+ 360浏览器均没问题 有些细小的东西要根据项目需求改 //有兼容问题的话可以在下面判断浏览器的方法里写 if(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.match(/9./i)=="9.") {//alert("IE 9.0"); }else if (!!window.ActiveXObject || "ActiveXObject" in window){//alert("IE 10"); }else{//其他浏览器 //alert("其他浏览器"); } } </script> </body> </html>
基于superTables做的改造，可以完美锁定表头和列
以上是关于表格头部header固定的主要内容，如果未能解决你的问题，请参考以下文章
elementUI 结合createElement自定义table头部筛选