使用的两个table实现表头固定表体滚动，并且实现表格的合并

原创已于 2022-10-10 14:21:30 修改 · 527 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#servlet #java #前端

于 2022-10-10 14:16:12 首次发布

工作积累专栏收录该内容

39 篇文章

订阅专栏

本文介绍了一种解决表格跨行跨列合并与tbody滚动冲突的方法，通过使用两个独立的表格来实现表头固定及主体滚动的效果。

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

当表格使用了跨行跨列合并时候不能同时使用display属性，不能实现tbody滚动效果，因此使用两个表格实现:

<div class="jcTable">
                <table  id="tableThead">
                        <tr>
                            <th >分类</th>
                            <th>指标名称</th>
                            <th>全省</th>
                            <th>南昌市</th>
                            <th>景德镇</th>
                            <th>萍乡市</th>
                            <th>九江市</th>
                            <th>新余市</th>
                            <th>鹰潭市</th>
                            <th>赣州市</th>
                            <th>吉安市</th>
                            <th>宜春市</th>
                            <th>抚州市</th>
                            <th>上饶市</th>
                        </tr>
                </table>
                <table id="tableId">
                    <tbody>
                        <tr v-for="(item,index) in tableData" :key="index">
                            <td class="tableId-td1">{{item.fenlei}}</td>
                            <td class="tableId-td2">{{item.zbmc}}</td>
                            <td>{{item.qs}}</td>
                            <td><div :class="[item.ncs==0? 'yuan0':item.ncs==1? 'yuan1':item.ncs==2? 'yuan2':'']"></div></td>
                            <td><div :class="[item.jdz==0? 'yuan0':item.jdz==1? 'yuan1':item.jdz==2? 'yuan2':'']"></div></td>
                            <td><div :class="[item.pxs==0? 'yuan0':item.pxs==1? 'yuan1':item.pxs==2? 'yuan2':'']"></div></td>
                            <td><div :class="[item.jjs==0? 'yuan0':item.jjs==1? 'yuan1':item.jjs==2? 'yuan2':'']"></div></td>
                            <td><div :class="[item.xys==0? 'yuan0':item.xys==1? 'yuan1':item.xys==2? 'yuan2':'']"></div></td>
                            <td><div :class="[item.yts==0? 'yuan0':item.yts==1? 'yuan1':item.yts==2? 'yuan2':'']"></div></td>
                            <td><div :class="[item.tzs==0? 'yuan0':item.tzs==1? 'yuan1':item.tzs==2? 'yuan2':'']"></div></td>
                            <td><div :class="[item.jas==0? 'yuan0':item.jas==1? 'yuan1':item.jas==2? 'yuan2':'']"></div></td>
                            <td><div :class="[item.ycs==0? 'yuan0':item.ycs==1? 'yuan1':item.ycs==2? 'yuan2':'']"></div></td>
                            <td><div :class="[item.fzs==0? 'yuan0':item.fzs==1? 'yuan1':item.fzs==2? 'yuan2':'']"></div></td>
                            <td><div :class="[item.srs==0? 'yuan0':item.srs==1? 'yuan1':item.srs==2? 'yuan2':'']"></div></td>
                        </tr>
                    </tbody>
                </table>

css：

.jcTable {
        width: 3120px;
        height: 1384px;
        margin: auto;
        margin-top: 40px;
        color: #000 !important;
        #tableThead{
            width: 100%;
            border-spacing: 0;
            border-collapse: separate;
            & tr{
                width: 100%;
                height: 128px;
                background: url(../assets/images/bg-thead.png) no-repeat;
                background-size: 100% 100%;
                border: 2px solid rgba(152,198,255,1);
            }
            & tr th{
                font-family: PingFangSC-Regular;
                font-size: 32px;
                color: #FFFFFF;
                font-weight: 400;
                text-align: center;
                border: 2px solid rgba(152,198,255,1);
            }
            & tr th{
                width: 175px;
            }
            & tr th:nth-child(1){
                width: 268px;
            }
            & tr th:nth-child(2){
                width: 748px;
            }
 
        }
        #tableId {
            width: 100%;
            height: calc(1384px - 128px);
            border-spacing: 0;
            border-collapse: separate;
            overflow-y: overlay;
            display: inline-block;
            & td {
                border: 2px solid rgba(152,198,255,1);
                font-family: PingFangSC-Regular;
                font-size: 32px;
                color: #FFFFFF;
                font-weight: 400;
                text-align: center;
            }
            & tr td{
                width: 175px;
            }
            & tr .tableId-td1{
                width: 268px;
            }
            & tr .tableId-td2{
                width: 748px;
            }
           
            &  tr{
                height: 98px;
            }
            &  tr:nth-child(2n) {
                background: rgba(50,197,255,0.08);
            }
            &  tr td div{
                margin: auto;
            }
            &  tr td .yuan0{
                width: 32px;
                height: 32px;
                background: rgba(255,0,67,0.60);
                border: 2px solid rgba(255,0,67,1);
                box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.19);
                border-radius: 50%;
            }
            &  tr td .yuan1{
                width: 32px;
                height: 32px;
                background: rgba(248,182,12,0.60);
                border: 2px solid rgba(248,182,12,1);
                box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.19);
                border-radius: 50%;
            }
            &  tr td .yuan2{
                width: 32px;
                height: 32px;
                background: rgba(47,250,182,0.60);
                border: 2px solid rgba(47,250,182,1);
                box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.19);
                border-radius: 50%;
            }
        }
 
    }

合并的代码在原生table动态数据，通过jQuery实现相同数据时候跨行合并

效果图: