HTML表头固定，表体滚动方案

在前端开发过程中，经常会遇到一个需求就是，需要一个表格展示数据，

1、表格头纵向位置固定，纵向滚动时，若表体内容超长时，表头不能移动，表体内容滚动显示；

2、表格头横向随表格内容横向滚动；

效果展示：

关键：

1、表头（意义上的）和表体（意义上的）都用一个table来显示；

2、因为表体可以纵向滚动，右边多出一个纵向滚动条，所以表体的宽度要比表头的宽度多出17个像素，也就是说，如果要设置表格的宽度是500的话，表体的宽度为100%，那表头的宽度就是减去17个像素，就是calc(100% - 17px)；

3、列宽要固定，两个table节点的table-layout样式为fixed

全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .table {
            border: solid 1px #ddd;
            width: 100%;
            display: inline-block;
        }

        th, td {
            border-right: solid #ddd 1px;
            border-bottom: solid #ddd 1px;
        }

        th {
            background-color: #ddd;
        }
    </style>
</head>
<body>

<div style="width: 500px">
    <div ref="table" class="table">
        <div style="width: calc(100% - 17px);overflow-x: hidden;" id="table-head">
            <table style="background-color: #fff;width: 100%;table-layout: fixed;">
                <thead>
                <tr>
                    <th style="width: 200px">姓名</th>
                    <th style="width: 200px">性别</th>
                    <th style="width: 200px">省份证号</th>
                    <th style="width: 200px">省份证号</th>
                    <th style="width: 200px">省份证号</th>
                </tr>
                </thead>
            </table>
        </div>
        <div style="width: 100%;overflow-x: scroll;height: 150px;overflow-y: scroll;" id="table-body">
            <table style="background-color: #fff;width: 100%;table-layout: fixed">
                <tbody>
                <tr>
                    <td style="width: 200px">张三开始</td>
                    <td style="width: 200px">男</td>
                    <td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
                    <td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
                    <td style="width: 200px">
                        <img src="//www.baidu.com/img/bd_logo1.png" style="height: 28px;width: auto">
                        <img src="//www.baidu.com/img/bd_logo1.png" style="height: 28px;width: auto">
                        <img src="//www.baidu.com/img/bd_logo1.png" style="height: 28px;width: auto">
                        <img src="//www.baidu.com/img/bd_logo1.png" style="height: 28px;width: auto">
                        <img src="//www.baidu.com/img/bd_logo1.png" style="height: 28px;width: auto">
                    </td>
                </tr>
                <tr>
                    <td style="width: 200px">张三1</td>
                    <td style="width: 200px">男</td>
                    <td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
                    <td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
                    <td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
                </tr>
                <tr>
                    <td style="width: 200px">张三2</td>
                    <td style="width: 200px">男</td>
                    <td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
                    <td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
                    <td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
                </tr>
                <tr>
                    <td style="width: 200px">张三</td>
                    <td style="width: 200px">男</td>
                    <td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
                    <td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
                    <td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
                </tr>
                <tr>
                    <td style="width: 200px">张三</td>
                    <td style="width: 200px">男</td>
                    <td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
                    <td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
                    <td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
                </tr>
                <tr>
                    <td style="width: 200px">张三</td>
                    <td style="width: 200px">男</td>
                    <td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
                    <td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
                    <td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
                </tr>
                <tr>
                    <td style="width: 200px">张三</td>
                    <td style="width: 200px">男</td>
                    <td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
                    <td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
                    <td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
                </tr>
                <tr>
                    <td style="width: 200px">张三结束</td>
                    <td style="width: 200px">男</td>
                    <td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
                    <td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
                    <td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script src="../../../src/lib/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    var $tableHead = $('#table-head');
    var $tableBody = $('#table-body');
    /*设置同步横向滚动*/
    $tableBody.scroll(function (ev) {
        $tableHead.scrollLeft($tableBody.scrollLeft()); // 横向滚动条
    });

</script>
</body>
</html>

HTML表头固定，表体滚动方案

猜你喜欢