table表格首列首行固定

本方法对于复杂类型的表表头同样适用，对于那些并行并列的（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", "");});