原生table表頭隨表體一起上下滾動
在html中利用js、css將表頭固定，可將原table拆分，分爲表頭table，表體table。
大致框架如：
<!--整體table-->
<table>
<tr>
<td>
<!--表頭table-->
<table>
<!--只存放表頭-->
<th></th>
<th></th>
</table>
</td>
</tr>
<tr>
<td>
<!--表體table-->
<table>
<!--存放表數據-->
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>但是，這種情況適合沒有滾動條的情況，一旦出現滾動條，則表頭和表體會有偏離。因此，我們可以在開始的時候根據滾動條的寬度來用css設置表頭的偏離位置。
代碼如下：
<html>
<head>
<title>
</title>
<style>
.table th,.table td{
min-width:60px;
}
table{
empty-cells:show;
border-collapse: collapse;
margin:0 auto;
}
.scrolltable{overflow-x:hidden; overflow-y: scroll; width: 100%;}
</style>
</head>
<body>
<!--fixed thead begin-->
<div style="margin-left: 10px; margin-right:0px; overflow-x: auto;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<div style="margin-left:10px;">
<table align="center" border="0"
style="font-size: 12px; margin-left: 0px;
margin-bottom: 0px; margin-right: 16px;"
id="table1"
class="table table-bordered table-striped table-hover">
<tr>
<!-- 這裏存放表頭名稱,例如：
<th >用戶號</th>
-->
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td align="center" width="100%">
<div style="overflow-y: auto;margin-left:0px;"
align="center" class="scrolltable">
<table class="table table-bordered table-striped table-hover"
id="searchresult" style="font-size: 12px">
<thead id="thead" style="display: none;"></thead>
<!--
這裏存放列表內容（後臺獲取的值 datalist）
<tr>
<td></td>
</tr>
例如
-->
</table>
</div>
</td>
</tr>
</table>
</div>
<!--fixed thead end-->
</body>
</html>將其設置爲居右16px；這個寬度基本上和滾動條的寬度一致，也可以自由設定
還需要js控制其寬度，若沒有滾動條則居右0px；需要js檢測表中div是否有滾動條
js代碼：
$(function(){
<!--獲取屏幕高度-->
var y = window.screen.availHeight;
<!--設置滾動div高度-->
document.getElementsByClassName("scrolltable")[0].style.height=y-400+"px";
<!--獲取表體行數-->
var rows = document.getElementById("searchresult").rows.length;
<!--獲取表頭行數-->
var rows2 = document.getElementById("table1").rows.length;
<!--如果結果存在的話-->
if(rows > 0){
<!--獲取結果集的列數-->
var cells = document.getElementById("searchresult").rows[0].cells.length;
for(var i=0;i<cells;i++){
<!--循環遍歷，將表體每列寬度賦值爲表頭對應列的寬度-->
document.getElementById("table1").rows[0].cells[i].width
=document.getElementById("searchresult").rows[0].cells[i].offsetWidth;
}
<!--獲取滾動區-->
var obj = document.getElementById("datatable");
if(obj.scrollHeight > obj.clientHeight || obj.offsetHeight > obj.clientHeight){
}else{
<!--如果沒有滾動條，則居右0px-->
document.getElementById("fixthead").style.marginRight = "0px";
}
}
})若有不明，可以留言，原創，若轉載請標明出處！謝謝！