CSS table表格表头head固定内容tbody滚动

核心思想：

首先是给tbody设置 display:block; 把行内变成块元素，然后给 tbody 一个固定高度和 overflow-y:scroll;，确保tbody多余的内容可以滑动。
给 thead 和 tbody tr 设置 display:table;，主要是 table-layout:fixed;,每个单元格均匀分配
为了 thead 和 tbody 对齐，给 thead 宽度减去滚动条默认宽度（window.innerWidth - document.body.clientWidth = 17px），这样就能对齐了。还可以给 thead 一个背景颜色，突出显示，下面是完整代码，复制粘贴即可使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .table tbody {
            display: block;
            height:200px;
            overflow-y:scroll;
        }

        .table thead, tbody tr {
            display:table;
            width:100%;
            table-layout:fixed;
            box-sizing: border-box;
        }


        .table thead {
            width: calc( 100% - 17px );
            background-color: #ddd;
        }
        
    </style>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>
        <table border="1" cellpadding="1" cellspacing="0" class="table">
            <thead>
                <tr>
                    <th>Header 1</th>
                    <th>Header 2</th>
                    <th>Header 3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>*</td>
                    <td>*</td>
                    <td>*</td>
                </tr>
                <tr>
                    <td>*</td>
                    <td>*</td>
                    <td>*</td>
                </tr>
                <tr>
                    <td>*</td>
                    <td>*</td>
                    <td>*</td>
                </tr>
                <tr>
                    <td>*</td>
                    <td>*</td>
                    <td>*</td>
                </tr>
                <tr>
                    <td>*</td>
                    <td>*</td>
                    <td>*</td>
                </tr>
                <tr>
                    <td>*</td>
                    <td>*</td>
                    <td>*</td>
                </tr>
                <tr>
                    <td>*</td>
                    <td>*</td>
                    <td>*</td>
                </tr>
                <tr>
                    <td>*</td>
                    <td>*</td>
                    <td>*</td>
                </tr>
                <tr>
                    <td>*</td>
                    <td>*</td>
                    <td>*</td>
                </tr>
                <tr>
                    <td>*</td>
                    <td>*</td>
                    <td>*</td>
                </tr>
            </tbody>
        </table>
</body>
<script>

</script>
</html>

来源：CSDN

作者：裴珞嘉

链接：https://blog.csdn.net/alokka/article/details/104431838

标签

table

html表格

css

CSS table表格 表头head固定 内容tbody滚动

CSS table表格表头head固定内容tbody滚动