Front-end page Table CSS realizes fixed header table first row and fixed column drag and fix

2 attributes that need to be used

table-layout : fixed  
position : sticky

table-layout

The table-layout attribute has two specific values:

auto (default value) - the total width of the table determines the maximum value of each cell (cell)
fixed - The total width of the table depends on the definition of table width and the definition of each column (column) width

In order to make the table scrollable, you must set table-layout: fixed and give the table width.

table {
 table-layout: fixed;
 width: 100%;
}

Position

Everyone should be familiar with the role of position, but the fixed form needs to use the setting of position: sticky

The performance of sticky is similar to the combination of relative and fixed. When it is visible in the target area, its behavior is like relative without any change. When the page scrolls beyond the target area, its performance is changed to fixed and it will be fixed at the target position

It should be noted that when position: sticky is applied to table, it can only be applied to <th> and <td>, and the target position left / right / top / bottom must be defined to have a fixed effect!

thead tr th {
 position:sticky;
 top:0;
}

Examples are as follows

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>纯CSS实现表格首行和首列固定</title>
    <!-- 插入Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .main{
            width: 500px;
            overflow:auto;
            height:208px;  /* 设置固定高度 */
        }
        td, th {
            /* 设置td,th宽度高度 */
            border:1px solid gray;
            width:100px;
            height:30px;
        }
        th {
            background-color:lightblue;
        }
        table {
            table-layout: fixed;
            width: 200px; /* 固定宽度 */
        }
        td:first-child, th:first-child {
            position:sticky;
            left:0; /* 首行永远固定在左侧 */
            z-index:1;
            background-color:lightpink;
        }
        thead tr th {
            position:sticky;
            top:0; /* 列首永远固定在头部  */
        }
        th:first-child{
            z-index:2;
            background-color:lightblue;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="main">
        <table  cellspacing="0" >
            <thead>
            <tr>
                <th> </th>
                <th> </th>
                <th> </th>
                <th> </th>
                <th> </th>
                <th> </th>
                <th> </th>
                <th> </th>
                <th> </th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item, index) in 30" :key="index">
                <td> </td>
                <td> </td>
                <td> </td>
                <td> </td>
                <td> </td>
                <td> </td>
                <td> </td>
                <td> </td>
                <td> </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello'
        },
    })
</script>
</html>

The effect is as follows

Reprinted from: https://www.cnblogs.com/tiandi/p/13883306.html

Front-end page Table CSS realizes fixed header table first row and fixed column drag and fix

Guess you like