@TedZhou
2016-05-10T15:51:46.000000Z
字数 596
阅读 363
html
css
javascript
技术
不说废话了,直接上code:)
<!--把table放到div容器里。-->
<div class="table-container">
<table class="table-fixed">
<thead>
<tr><th>column1</th>...略...</tr>
</thead>
<tbody>....略...</tbody>
</table>
<div>
<style>
/*限制容器高度并允许滚动*/
.table-container{
max-height: 200px;
overflow: auto;
}
/*表头cell设为相对定位*/
.table-fixed>thead>tr>th{
position:relative;
}
</style>
<script>
$(function(){
//容器滚动时,把表头cell的top设为scrollTop,以实现fixed效果
$('.table-container').scroll(function(){
$(this).find('.table-fixed>thead>tr>th').css('top',this.scrollTop);
});
});
</script>
相较于表头和内容分离的做法,这种实现方式不会出现对不齐的问题,而且比较简单(:不想写js的请忽略)