本方法对于复杂类型的表表头同样适用,对于那些并行并列的(colspan或者rowspan),不过需要在表格创建后自己额外修改自动生成表格
第一步引入js
//可以去这里下载自己重新创建一个,还需要引用jq文件
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script>
第二步html中table结构
<table>
<thead>
<tr>
<!-- 固定表头是th里面的内容 -->
<th></th>
</tr>
</thead>
<tbody>
<tr>
<!-- 如果你需要列表的第一列也固定 -->
<!-- <th></th> 使用这种模式支持rowspan -->
<td></td>
</tr>
<!-- more rows are possible -->
</tbody>
</table>
css
.sticky-wrap {
overflow-x: auto;
position: relative;
margin-bottom: 1.5em;
width: 100%;
}
.sticky-wrap .sticky-thead,
.sticky-wrap .sticky-col,
.sticky-wrap .sticky-intersect {
opacity: 0;
position: absolute;
top: 0;
left: 0;
transition: all .125s ease-in-out;
z-index: 50;
width: auto; /* Prevent table from stretching to full size */
}
.sticky-wrap .sticky-thead {
box-shadow: 0 0.25em 0.1em -0.1em rgba(0,0,0,.125);
z-index: 100;
width: 100%; /* Force stretch */
}
.sticky-wrap .sticky-intersect {
opacity: 1;
z-index: 150;
}
.sticky-wrap .sticky-intersect th {
background-color: #666;
color: #eee;
}
.sticky-wrap td,
.sticky-wrap th {
box-sizing: border-box;
}
参考效果:
原文参考网站地址:
https://tympanus.net/codrops/2014/01/09/sticky-table-headers-columns/
该网站的jq文件可能加载失败,看不到效果,下载引用的时候需要用自己的jq文件,
里面的样式也有以下几个问题,也可以自己修改成自己喜欢的样式:
1、css文件table样式:
如果你的网页内只有一个table可以无视,多个table会影响其他table的样式,需要额外在table样式前加个.sticky-wrap的限定(这个sticky-wrap类是jq自动在table外创建的),如:
.sticky-wrap td,
.sticky-wrap th {
box-sizing: border-box;
}
2、部分样式不兼容ie6,ie8,如:
tbody tr:hover {
background-color: rgba(129,208,177,.3);
}
tbody tr:nth-child(2n-1) {
background-color: #f5f5f5;
transition: all .125s ease-in-out;
}
需要兼容ie6的话,具体解决方法可自行添加jq方法,也可以参考以下方法
//先加个样式
tbody tr.AltItem {
background-color: #f5f5f5;
transition: all .125s ease-in-out;
}
//隔行换色
$("#tbl_credit tbody tr:even").addClass("AltItem");
//jq鼠标经过整行换色
$("#tbl_credit tbody tr").hover(function () {
$(this).css("background-color", "rgba(129,208,177,.3)");
}, function () {
$(this).css("background-color", "");
});