css实现table表头固定，主体tbody部分出现滚动条

笑到世界都狼狈

已于 2022-11-10 10:19:03 修改

阅读量2.8k

点赞数

分类专栏： css 文章标签： jquery css3 html

于 2020-04-02 14:26:19 首次发布

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

首先，这是原文链接：纯css实现table的表头固定tbody内容显示垂直滚动条-码云笔记，作者也写的比较好，但是我在原文的基础上，也发挥了一下自己的头脑，做了一点补充。

下面是我结合作者的代码做了一些修改的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            #contents{width: 100%;}
            
            /*关键设置 tbody出现滚动条*/
            table tbody {
                display: block;
                height:50px;
                overflow-y: auto;
                overflow-x: hidden;
            }
            table thead,
            tbody tr {
                display: table;
                width: 100%;
                table-layout: fixed;
            }
            table thead th {
                background: #00ccff;
            }
            table td,th{
              border-top:0;
              border-right:1px solid #999;
              border-bottom:1px solid #999;
              border-left:0;
            }
            /*对于滚动条的出现造成表头和主体部分不一致原文是这样写的，但这样写当主体内容不够滚动条未出现的时候比较奇怪，所以我用了几句js对表头的宽度做了限制*/
            /*关键设置：滚动条默认宽度是16px 将thead的宽度减16px*/
            /*table thead {
                width: calc( 100% - 1em)
            }*/
        </style>
        <script type="text/javascript" src="jquery.js"></script>

</head>
<body>
    <div id="contents">
        <table  cellspacing="0" cellpadding="0">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                </tr>
                
            </thead>
            <tbody id="tbody">
                <tr>
                    <td>1</td>
                    <td>哒哒</td>
                    <td>女</td>
                    <td>12</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>哒哒</td>
                    <td>女</td>
                    <td>12</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>哒哒</td>
                    <td>女</td>
                    <td>12</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>哒哒</td>
                    <td>女</td>
                    <td>12</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
<script type="text/javascript">
    /**判断tbody有没有滚动条
     *如果有滚动条，thead的宽度减去滚动条的宽度
     *反之，thead的宽度不变
     * [onload description]
     * @return {[type]} [description]
     */
    var obj=document.getElementById("tbody");  
    if(obj.scrollHeight>obj.clientHeight||obj.offsetHeight>obj.clientHeight){
            // console.log("有滚动条");
            $("table>thead").css("width",$("table>thead").width() - 18)
          }else{
              // console.log("无滚动条");
        }
 
</script>
</html>