顶部表头和侧面表头固定的表格div实现

顶部表头和侧面表头固定的表格div实现

最近在项目中有用到顶部和左边固定表头的表格，平常只用过一边固定的布局，这次需要两侧固定，实现起来比想象中的简单，赶紧记录下来，以免自己以后忘记。

顶部的表头左边是固定的，右侧overflow时可滚动，下面表格的主体也是同样的布局，整个表格限制了最大高度，在向下滚动的时候顶部的表头固定不动，向右滚动时左侧的表头固定不动。js非常简单，只有几行。

---

代码块

表格主要布局

<div class="container-fluid bg-white" style="width:1024px;padding:0 30px;overflow:auto;">
    <div class="crl-row no-gutter table-toptitle crl-aligncenter">
        <div class="col-30">
            <div class="crl-row ">
                <div class="product-name">产品</div>
            </div>
        </div>
        <div class="col-70 titltScroll" style="overflow:auto;">
            <div class="swiper-wrapper">
                <div class="slide-125"><span>河北省</span></div>
                ...
                <div class="slide-125"><span>海南省</span></div>
            </div>
        </div>