表格头部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固定的主要内容,如果未能解决你的问题,请参考以下文章

Tab表格thead头部固定(demo)

elementUI 结合createElement自定义table头部筛选

我怎样才能让表格的主体滚动但将其头部固定在原位?

StickHeaderItemDecoration--RecyclerView使用的固定头部装饰类

具有固定头部的滚动表中的粘性子标题

将表格头部的列与主体对齐时出现问题[重复]