Table implements fixed rows and columns

2 attributes needed

table-layout : fixed  
position : sticky

table-layout

The table-layout attribute has two specific values:

auto (default) - the total width of the table determines the maximum size of each cell
fixed - the total width of the table is determined by the definition of table width and the definition of each column width

In order for the table to display a scrolling effect, table-layout:fixed must be set and the table width must be given.

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

Position

Everyone should be familiar with the role of position, and for fixed tables, you need to use the setting of position: sticky

The behavior of sticky is similar to the combination of relative and fixed. When it is visible in the target area, it behaves like relative without any change. When the page scrolls beyond the target area, its behavior changes 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 act on <th> and <td>, and the target position left / right / top / bottom must be defined before the fixed effect will appear!

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>

Table implements fixed rows and columns

Guess you like