纯CSS实现复杂表头和多列同时固定

　　在项目开发过程中，遇到需要固定表头和左侧列的情况，查了很多资料，网上有的给的是两表格进行固定，要计算两个表格每一行的高度，非常复杂。于是参考了一些网上的资料，动手写了一个复杂表头和多列同时固定的Demo，废话不多说，直接上代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>纯css实现表格多行多列固定</title>
    <style>
        .main {
            width: 800px;
            overflow: auto;
            height: 208px; /* 设置固定高度 */
        }

        td, th {
            /* 设置td,th宽度高度 */
            border: 1px solid gray;
            width: 150px;
            height: 30px;
            background-color: white;
        }

        table {
            table-layout: fixed;
            width: 200px; /* 固定宽度 */
        }

        /*设置列固定*/
        td:first-child, th:first-child {
            position: sticky;
            left: 0; /* 首行永远固定在左侧 */
        }

        td:nth-child(2), th:nth-child(2) {
            position: sticky;
            left: 150px; /* 首行永远固定在左侧 */
        }

        td:nth-child(3), th:nth-child(3) {
            position: sticky;
            left: 300px; /* 首行永远固定在左侧 */
        }

        /*设置行固定*/
        thead tr:first-child th {
            position: sticky;
            top: 0;
        }

        thead tr:nth-child(2) th {
            position: sticky;
            top: 34px;
        }

        /*左侧th浮在最上层*/
        th:first-child,th:nth-child(2),th:nth-child(3) {
            z-index: 3;
        }

        /*通过第二行的th固定确定右侧th的层次*/
        thead tr:nth-child(2) th {
            z-index: 2;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="main">
            <table cellspacing="0">
                <thead>
                    <tr>
                        <th rowspan="2">标题1</th>
                        <th rowspan="2">标题2</th>
                        <th rowspan="2">标题3</th>
                        <th colspan="2">标题4</th>
                        <th colspan="2">标题5</th>
                        <th colspan="2">标题6</th>
                    </tr>
                    <tr>
                        <th>标题4_1</th>
                        <th>标题4_2</th>
                        <th>标题5_1</th>
                        <th>标题5_2</th>
                        <th>标题6_1</th>
                        <th>标题6_2</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in 30" key="index">
                        <td>行1</td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                    </tr>
                    <tr v-for="(item, index) in 30" key="index">
                        <td>行2</td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                    </tr>
                    <tr v-for="(item, index) in 30" key="index">
                        <td>行3</td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                    </tr>
                    <tr v-for="(item, index) in 30" key="index">
                        <td>行4</td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                    </tr>
                    <tr v-for="(item, index) in 30" key="index">
                        <td>行5</td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                    </tr>
                    <tr v-for="(item, index) in 30" key="index">
                        <td>行6</td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                    </tr>
                    <tr v-for="(item, index) in 30" key="index">
                        <td>行7</td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                    </tr>
                    <tr v-for="(item, index) in 30" key="index">
                        <td>行8</td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>
View Code
posted @ 2022-01-26 18:18  yscit  阅读(841)  评论(1)  编辑  收藏  举报