html表格,顶栏和侧栏固定不动,如何实现
<html> | |
<head> | |
<script src="../assets/jquery-2.1.3.js"></script> | |
<script src="../tableHeadFixer.js"></script> | |
<link rel="stylesheet" href="../assets/bootstrap-3.3.2/css/bootstrap.css"> | |
<style> | |
#parent { | |
height: 300px; | |
} | |
</style> | |
<script> | |
$(document).ready(function() { | |
$("#fixTable").tableHeadFixer(); | |
}); | |
</script> | |
</head> | |
<body> | |
<h2>TableHeadFixer Fix Header</h2> | |
<div id="parent"> | |
<table id="fixTable" class="table"> | |
<thead> | |
<tr> | |
<th>Ano</th> | |
<th>Jan</th> | |
<th>Fev</th> | |
<th>Mar</th> | |
<th>Abr</th> | |
<th>Maio</th> | |
<th>Total</th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr> | |
<td>2010</td> | |
<td>100.00</td> | |
<td>100.00</td> | |
<td>100.00</td> | |
<td>100.00</td> | |
<td>100.00</td> | |
<td>500.00</td> | |
</tr> | |
<tr> | |
<td>2011</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>550.00</td> | |
</tr> | |
<tr> | |
<td>2012</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>550.00</td> | |
</tr> | |
<tr> | |
<td>2012</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>550.00</td> | |
</tr> | |
<tr> | |
<td>2012</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>550.00</td> | |
</tr> | |
<tr> | |
<td>2012</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>550.00</td> | |
</tr> | |
<tr> | |
<td>2012</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>550.00</td> | |
</tr> | |
<tr> | |
<td>2012</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>550.00</td> | |
</tr> | |
<tr> | |
<td>2012</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>550.00</td> | |
</tr> | |
<tr> | |
<td>2012</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>550.00</td> | |
</tr> | |
<tr> | |
<td>2012</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>550.00</td> | |
</tr> | |
<tr> | |
<td>2012</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>550.00</td> | |
</tr> | |
<tr> | |
<td>2012</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>550.00</td> | |
</tr> | |
<tr> | |
<td>2012</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>550.00</td> | |
</tr> | |
<tr> | |
<td>2012</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>110.00</td> | |
<td>550.00</td> | |
</tr> | |
</tbody> | |
</table> | |
</div> | |
</body> | |
</html> |
附件下载:http://www.yun-hua.net/TableHeadFixer.zip
评论(0)