html怎么实现表头不动

htML实现表头不动的方法：首先将内容要滚动的区域控制在tbody标签中，并添加“overflow-y: auto; ”样式；然后给tr标签添加“table-layout:fixed; ”即可固定表头。

本文操作环境：windows7系统、HTML5& & CSS3版、Dell G3电脑。

HTML table表格 固定表头 tbody加滚动条

纯CSS table表格 thead固定 tbody滚动效果

由于项目需要，在表格中，当数据量越来越多时，就会出现滚动条，而在滚动的过程中，默认情况下表格头部会跟着表格内容一起滚动，导致看不到头部对应的字段名，影响体验效果！

实现思路：

将内容要滚动的区域控制在 tbody 标签中添加 overflow-y: auto; 样式，给 tr 标签添加 table-layout:fixed; (这是核心)样式，由于 tbody 有了滚动条后，滚动条也要占位，又会导致 tbody 和 thead 不对齐，所以在设置 tbody 的宽度时要把滚动条的宽度也加上【如果不想显示滚动条的话，可以把滚动条的宽度设置为0px，滚动条就没有了。

下面是效果图，具体完整实例代码也在下面：

完整实例代码：

!DOCTYPE html>
    html>
     head>
        meta charset="UTF-8">
        meta name="viewport" content="width=device-width, inITial-scale=1.0">
        meta http-equiv="X-UA-Compatible" content="ie=Edge">
        title>
    纯CSS table表格 thead固定 tbody滚动/title>
        style>
        .table-box {
                margin: 100px auto;
                width: 1024px;
        }
         /* 滚动条宽度 */        ::-webkit-scrollbar {
                width: 8px;
                background-color: transparent;
        }
         /* 滚动条颜色 */        ::-webkit-scrollbar-thumb {
                background-color: #27314d;
        }
         table {
                width: 100%;
                border-spacing: 0px;
                border-collapse: collapse;
        }
         table caption{
                font-weight: bold;
                font-Size: 24px;
                line-height: 50px;
        }
         table th, table td {
                height: 50px;
                text-align: center;
                border: 1px solid gray;
        }
         table thead {
                color: white;
                background-color: #38F;
        }
         table tbody {
                display: block;
                width: calc(100% + 8px);
     /*这里的8px是滚动条的宽度*/            height: 300px;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
        }
         table tfoot {
                background-color: #71ea71;
        }
         table thead tr, table tbody tr, table tfoot tr {
                box-sizing: border-box;
                table-layout: fixed;
                display: table;
                width: 100%;
        }
         table tbody tr:nth-of-type(odd) {
                background: #EEE;
        }
         table tbody tr:nth-of-type(even) {
                background: #FFF;
        }
         table tbody tr td{
                border-bottom: none;
        }
         /style>
    /head>
     body>
        section>
            table cellpadding="0" cellspacing="0">
                caption>
    纯CSS table表格 thead固定 tbody滚动/caption>
                            thead>
                    tr>
                        th>
    序 号/th>
                        th>
    姓 名/th>
                        th>
    年 龄/th>
                        th>
    性 别/th>
                        th>
    手 机/th>
                    /tr>
                /thead>
                 tbody>
                    tr>
                        td>
    001/td>
                        td>
    Name/td>
                        td>
    28/td>
                        td>
    女/td>
                        td>
    mobile/td>
                    /tr>
                    tr>
                        td>
    002/td>
                        td>
    Name/td>
                        td>
    28/td>
                        td>
    男/td>
                        td>
    Mobile/td>
                    /tr>
                    tr>
                        td>
    003/td>
                        td>
    Name/td>
                        td>
    28/td>
                        td>
    女/td>
                        td>
    Mobile/td>
                    /tr>
                    tr>
                        td>
    004/td>
                        td>
    Name/td>
                        td>
    28/td>
                        td>
    男/td>
                        td>
    Mobile/td>
                    /tr>
                    tr>
                        td>
    005/td>
                        td>
    Name/td>
                        td>
    28/td>
                        td>
    女/td>
                        td>
    Mobile/td>
                    /tr>
                    tr>
                        td>
    006/td>
                        td>
    Name/td>
                        td>
    28/td>
                        td>
    男/td>
                        td>
    Mobile/td>
                    /tr>
                    tr>
                        td>
    007/td>
                        td>
    Name/td>
                        td>
    28/td>
                        td>
    女/td>
                        td>
    Mobile/td>
                    /tr>
                    tr>
                        td>
    008/td>
                        td>
    Name/td>
                        td>
    28/td>
                        td>
    男/td>
                        td>
    Mobile/td>
                    /tr>
                /tbody>
                 tfoot>
                    tr>
                        td colspan="5">
    【table，thead，tbody，tfoot】 colspan：合并行， rowspan：合并列 /td>
                    /tr>
                /tfoot>
            /table>
        /section>
    /body>
     /html>
    

【推荐学习：html视频教程】

以上就是html怎么实现表头不动的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！