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

最新推荐文章于 2023-05-29 10:05:08 发布

Colossalis_c

最新推荐文章于 2023-05-29 10:05:08 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记本文章标签：表格表头不动布局

本文链接：https://blog.youkuaiyun.com/Colossalis_c/article/details/77543369

笔记本专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何实现顶部和侧面表头都固定的表格div布局。在项目中，需要创建一个顶部表头在滚动时固定，同时侧面表头也在横向滚动时保持不动的表格。通过简单的CSS布局和少量JavaScript代码，实现了这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

顶部表头和侧面表头固定的表格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;
}

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