表格滚动方法总结

例1: 表头固定

html

序号	姓名	年龄	性别	身高 (cm)	体重 (kg)
01	德莱厄斯	31	男	180	80
02	安妮	14	女	150	35
03	阿狸	22	女	165	40
04	卢锡安	28	男	172	55
05	艾克	25	男	168	60

table {
    border-collapse: collapse;
    text-align: center;
    tr {
        height: 0.44rem;
        td,th {
            width: 1rem;
            border-right: 0.01rem solid rgba(81, 159, 241, 0.2);
        }
        th {
            border-right: 0.01rem solid rgba(160, 216, 226, 0.5);
        }
    }
    thead {
        tr {
            background: #519FF1;
            font-size: 0.15rem;
            color: #FFFFFF;
            th {
                font-weight: normal;
            }
        }
    }
    tbody {
        height: 1.32rem;
        overflow: auto;
        tr:nth-child(odd) {
            background: #FFFFFF;
        }
        tr:nth-child(even) {
            background: #DCECFC;
        }
    }
}

例2: 首行首列固定

如图所示
上下滚动, 1 2固定; 左右滚动, 1 3固定

方法1 ★★☆☆☆

思路: 1 始终固定; 2 3 利用 position: sticky; 粘性布局
优点: 简单, HTML+CSS 即可实现
缺点: 内容折行会出现问题, 且兼容性不太友好兼容性查看

html

序号
01
02
03
04
05
06
07
德莱厄斯	31	男	180	80
安妮	14	女	150	35
阿狸	22	女	165	40
卢锡安	28	男	172	55
艾克	25	男	168	60
努努	8	男	30	20
提莫	11	女	40	20

css
注: 如果是全屏滚动的话, 得先设置最最外层的 div 高度为 100%; 建议整体用 fixed布局, 否则可能出现问题

.wrap {
    width: 100%;
    height: 2.2rem;
    overflow: scroll;
    table {
        position: relative;
        border-collapse: collapse;
        text-align: center;
        td, th {
            height: 0.44rem;
            width: 1rem;
        }
        thead {
            display: block;
            width: 100%;
            th {
                font-weight: normal;
                background: #519FF1;
                font-size: 0.15rem;
                color: #FFFFFF;
            }
        }
        tbody {
            width: 100%;
            tr:nth-child(odd) {
                background: #FFFFFF;
            }
            tr:nth-child(even) {
                background: #DCECFC;
            }
        }
        .t1 {
            position: sticky;
            width: 1rem;
            z-index: 9;
            float: left;
            left: 0;
            top: 0;        
        }
        .t2 {
            position: sticky;
            width: 5rem;
            top: 0;
            margin-left: 1rem;
            z-index: 8;
        }
        .t3 {
            position: sticky;
            width: 1rem;
            left: 0;
            float: left;
            z-index: 8;
        }
        .t4 {
            position: absolute;
            width: 5rem;
            left: 1rem;
            z-index: 7;
        }
    }
}

方法2 ★★★☆☆

思路: 让 3 随着 4 上下移动; 2 随着 4 左右移动
优点: 兼容性好
缺点: 内容折行会出现问题

序号
01
02
03
04
05
06
07
德莱厄斯	31	男	180	80
安妮	14	女	150	35
阿狸	22	女	165	40
卢锡安	28	男	172	55
艾克	25	男	168	60
努努	8	男	30	20
提莫	11	女	40	20

方法3 ★★★★★

Element UI 受到的启发

思路: 两层 div 嵌套
优点: 兼容性好, 并且数据折行后高度灵活改变
缺点: 暂无

小技巧:

表格自动折行处理

td {
    white-space: nowrap;
}
/*  */

1111	2222	3333	4444	5555	6666
1111	2222	3333	4444	5555	6666
1111	2222	3333	4444	5555	6666
1111	2222	3333	4444	5555	6666
1111	2222	3333	4444	5555	6666
1111	2222	3333	4444	5555	6666
1111	2222	3333	4444	5555	6666

1111	2222	3333	4444	5555	6666
1111	2222	3333	4444	5555	6666
1111	2222	3333	4444	5555	6666
1111	2222	3333	4444	5555	6666
1111	2222	3333	4444	5555	6666
1111	2222	3333	4444	5555	6666
1111	2222	3333	4444	5555	6666
1111	2222	3333	4444	5555	6666

表格滚动方法总结

例1: 表头固定

例2: 首行首列固定

方法1 ★★☆☆☆

方法2 ★★★☆☆

方法3 ★★★★★

小技巧:

你可能感兴趣的:(表格滚动方法总结)