让table固定表头的一种实现方法

html css javascript 技术

不说废话了，直接上code：)

.html

<!--把table放到div容器里。-->
<div class="table-container">
  <table class="table-fixed">
    <thead>
        <tr><th>column1</th>...略...</tr>
    </thead>
    <tbody>....略...</tbody>
  </table>
<div>

.css

<style>
/*限制容器高度并允许滚动*/
.table-container{
  max-height: 200px;
  overflow: auto;
}
/*表头cell设为相对定位*/
.table-fixed>thead>tr>th{
    position:relative;
}
</style>

.js

<script>
$(function(){
  //容器滚动时，把表头cell的top设为scrollTop，以实现fixed效果
  $('.table-container').scroll(function(){
    $(this).find('.table-fixed>thead>tr>th').css('top',this.scrollTop);
  });
});
</script>

总结

相较于表头和内容分离的做法，这种实现方式不会出现对不齐的问题，而且比较简单（:不想写js的请忽略）