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

最新推荐文章于 2023-03-24 09:30:53 发布

alokka

最新推荐文章于 2023-03-24 09:30:53 发布

阅读量1.3k

点赞数 1

分类专栏： CSS

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

版权

CSS 专栏收录该内容

8 篇文章 2 订阅

订阅专栏

核心思想：

首先是给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>
<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>

alokka

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
CSS table表格表头head固定内容tbody滚动

核心思想：首先是给tbody设置 display:block; 把行内变成块元素，然后给 tbody 一个固定高度和 overflow-y:scroll;，确保tbody多余的内容可以滑动。给 thead 和 tbody tr 设置 display:table;，主要是 table-layout:fixed;,每个单元格均匀分配为了 thead 和 tbody 对齐，给 thead 宽...
复制链接

扫一扫