简单实现固定表格的上表头、左表头
如果要在一个有限大小的元素里展示一个大表格该怎么办？
第一步肯定是把这个大表格塞到元素里，然后超出部分用滚动条来查看。
但是现在问题来了，怎么让一个表格向下滚动的时候上表头不动？向右滚动的时候左表头不动呢？
先看看效果。
先贴上JS代码。
$(document).ready(function(){ //当父元素滚动时 $(".bd").scroll(function(){ //表头根据滚动距离调整相对位置 $("#headerTop").css({"position":"relative","top":$(".bd").scrollTop(),"z-index":"3"}); //遍历每一个行 $("#table tr").each(function(){ //取每一行第一个元素，即左表头,根据滚动距离调整相对位置 $(this).children().first().css({"position":"relative","left":$(".bd").scrollLeft(),"z-index":"2"}); }); }); });
用到的两个方法
1.监听某个元素的滚动条事件
$(selector).scroll(function(){.......});
2.获取滚动条滚动的距离
$(selector).scrollTop();
$(selector).scrollLeft();
然后是CSS代码。
input { height:22px; } .bd { width:200px; height:210px; overflow:scroll; } #table { line-height:24px; } #table th,#table td { background-color:#fff; } #headerTop { background-color:#fff; } .headerLeft { width:50px; height:22px;line-height:24px; text-align:center; }
用两个背景色盖住底层元素，相对位置position:relative;都写在JS里了，当然也可以写在CSS里面。
最后是HTML
<body> <div class="bd"> <table id="table"> <tr id="headerTop"> <th>姓名</th> <th>一月</th> <th>二月</th> <th>三月</th> <th>四月</th> <th>五月</th> <th>六月</th> <th>七月</th> <th>八月</th> <th>九月</th> <th>十月</th> <th>十一月</th> <th>十二月</th> </tr> <tr> <td><div class="headerLeft">成成1</div></td> <td><input /></td> <td><input /></td> <td><input /></td> <td><input /></td> <td><input /></td> <td><input /></td> <td><input /></td> <td><input /></td> <td><input /></td> <td><input /></td> <td><input /></td> <td><input /></td> </tr> </table> </div> </html>
就只贴一行了...
