表格頭部header固定
阿新 • • 發佈：2018-04-10
desc 固定 gen javascrip keyword 表頭 demo sda version
<!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固定