今天有个项目小优化，就是报表页面太长，需要加个固定的table头，方便操作人员浏览。
因此就需要采用css样式来固定，在网上搜了很多，但都不太满足(要嘛需要自己写好多样式，要嘛就是固定的表头在鼠标滚动时，会出现晃动，或者thead与tbody中的tr错位)，尝试了很多，都快要放弃了(准备请教前端同学)，最后还好又找到了一个帖子，经过略微调试了一下，比较符合我的需求。
代码简洁，无需写额外样式代码，并且表头能很好的固定。略微修改一下就可以应用到一个单独的html页面中。好了，废话不多说，直接贴代码，(没有找到上传附件的地方)如果觉得有用的同学,请复制存储为一个html文件即可。
需要引入3个线上资源(jquery.min.js、bootstrap.min.js、bootstrap.css)
<html>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" />
<script type="text/javascript" src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js" ></script>
<style type="text/css">
body {
padding-top: 50px;
}
#rollDiv {
padding: 0;
overflow-y: scroll;
overflow-x: hidden;
}
.fixTable thead {
background-color: #ecebeb;
}
.fix-table {
table-layout:fixed;
word-break:break-all;
}
</style>
<body>
<div id="rollDiv" class="col-xs-offset-3 col-xs-6" style="margin: 0 10px;width:99%;">
<table class="table table-bordered scrollTable fix-table">
<thead><tr><th>Sl No</th><th>Name</th><th>Subject</th><th>Marks</th></tr></thead>
<tbody>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
<tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
</tbody>
</table>
</div>
<script type="text/javascript">
$(function () {
initTableStyle();
});
var initTableStyle = function(){
var $fixTable = $('#rollDiv .fixTable');
$('#rollDiv').css('height',window.screen.height*0.7+'px');
$('#rollDiv').scroll(function() {
var id = '#' + this.id;
var scrollTop = $(id).scrollTop() || $(id).get(0).scrollTop,
style = {
'position': 'absolute',
'left': '0',
'right': '0',
'top': scrollTop + 'px'
};
if ($fixTable.length) {
(scrollTop === 0) ? $fixTable.addClass('hidden') : $fixTable.removeClass('hidden');
$fixTable.css(style);
}else {
var html = $(id + ' .scrollTable thead').get(0).innerHTML;
var table = $('<table class="table table-bordered fixTable fix-table"><thead>' + html + '</thead></table>');
table.css(style);
$(id).append(table);
$fixTable = $(this).find('.fixTable');
}
});
}
</script>
</body>
</html>
html预览效果图：
来源：oschina
链接：https://my.oschina.net/u/1789770/blog/1818250