顶部表头和侧面表头固定的表格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>    </div>    <div style="min-height:75px ;max-height:500px;overflow:auto;">        <div class="crl-row no-gutter">            <div class="col-30">                <div class="media-list table-title">                    <ul>                        <li class="item-content">                            <div class="item-media"><span class="count">1</span></div>                            <div class="item-inner">                                <div class="item-title">注射用拉氧头孢钠&nbsp;0.25g*10*48</div>                                <div class="item-text">均价：<b><span class="color-orange">7元</span></b></div>                            </div>                        </li>                        <li class="item-content">                            <div class="item-media"><span class="count">2</span></div>                            <div class="item-inner">                                <div class="item-title">注射用拉氧头孢钠&nbsp;0.25g*10*48</div>                                <div class="item-text">均价：<b><span class="color-orange">7元</span></b></div>                            </div>                        </li>                    </ul>                </div>            </div>            <div class="col-70 table-body bodyScroll" style="overflow:auto;">                <div class="swiper-wrapper">                    <div class="slide-125">50元</div>                    ...                    <div class="slide-125">50元</div>                </div>                <div class="swiper-wrapper">                    <div class="slide-125">50元</div>                    ...                    <div class="slide-125">50元</div>                </div>            </div>        </div>    </div></div>

css仅列出布局相关部分

.swiper-wrapper {    width: 100%;    display: -webkit-box;    display: -ms-flexbox;    display: -webkit-flex;    display: flex;}.table-body .swiper-wrapper .slide-125 {    height: 70px;    border-right: 1px solid #ddd;    border-bottom: 1px solid #ddd;}.swiper-wrapper .slide-125 {    width: 12.5%;    font-size: 18px;    background: #fff;    padding-bottom: 15px;    padding-top: 15px;    display: -webkit-box;    display: -ms-flexbox;    display: -webkit-flex;    display: flex;    -webkit-box-pack: center;    -ms-flex-pack: center;    -webkit-justify-content: center;    justify-content: center;    -webkit-box-align: center;    -ms-flex-align: center;    -webkit-align-items: center;    align-items: center;    flex-shrink: 0;    position: relative;}

js

  $('.bodyScroll').scroll(function () {        $(".titltScroll").scrollLeft($('.bodyScroll').scrollLeft());    });    $('.titltScroll').scroll(function () {        $(".bodyScroll").scrollLeft($('.titltScroll').scrollLeft());    });