解决表格内容因为滚动条导致换行（二）固定表头

作者: Lia代码猪崽 | 来源:发表于2019-04-19 16:25 被阅读0次

解决表格内容因为滚动条导致换行（二）固定表头
解决表格内容因为滚动条导致换行
antd中表格组件的表头和表格体对齐
element table 固定部分二级表头
ant design pro table的使用
TABLE表头固定问题
表格固定表头
jquery固定table表头
VUE2.0+ElementUI2.0表格el-table：自适
custom-table记录

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">
    <title>滚动条不换行</title>
    <style>
        body {
            text-align: center;
        }
        .table-container {
            margin-top: 50px;
            display: inline-block;
            overflow: auto;
            width: 50%;
            /*background-color: #ff1d5e;*/
        }
        #tableHeader {
            display: none;
            width: 100%;
            height: 30px;
        }
        #tableContent {
            display: none;
            /*width: 500px;*/
            height: 100px;
            overflow: auto;
        }
        #tableContent tr {
            height: 30px;
        }
    </style>
</head>

<body>
<div class="table-container">
    <div id="tableHeader">
        <table border="1" width="100%">
            <tr>
                <th width="20%">Month</th>
                <th width="30%">Savings</th>
                <th width="20%">Savings</th>
                <th class="col2" width="30%">Savings</th>
            </tr>
        </table>
    </div>
    <div id="tableContent">
        <table border="1" width="100%">
            <tr>
                <td width="20%">January</td>
                <td width="30%">January</td>
                <td width="20%">January</td>
                <td width="30%">January</td>
            </tr>
            <tr>
                <td width="20%">January</td>
                <td width="30%">January</td>
                <td width="20%">January</td>
                <td width="30%">January</td>
            </tr>
            <tr>
                <td width="20%">January</td>
                <td width="30%">January</td>
                <td width="20%">January</td>
                <td width="30%">January</td>
            </tr>
            <tr>
                <td width="20%">January</td>
                <td width="30%">January</td>
                <td width="20%">January</td>
                <td width="30%">January</td>
            </tr>
            <tr>
                <td width="20%">January</td>
                <td width="30%">January</td>
                <td width="20%">January</td>
                <td width="30%">January</td>
            </tr>
            <tr>
                <td width="20%">January</td>
                <td width="30%">January</td>
                <td width="20%">January</td>
                <td width="30%">January</td>
            </tr>
            <tr>
                <td width="20%">January</td>
                <td width="30%">January</td>
                <td width="20%">January</td>
                <td width="30%">January</td>
            </tr>
            <tr>
                <td width="20%">January</td>
                <td width="30%">January</td>
                <td width="20%">January</td>
                <td width="30%">January</td>
            </tr>
            <tr>
                <td width="20%">January</td>
                <td width="30%">January</td>
                <td width="20%">January</td>
                <td width="30%">January</td>
            </tr>
            <tr>
                <td width="20%">January</td>
                <td width="30%">January</td>
                <td width="20%">January</td>
                <td width="30%">January</td>
            </tr>
            <tr>
                <td width="20%">January</td>
                <td width="30%">January</td>
                <td width="20%">January</td>
                <td width="30%">January</td>
            </tr>
            <tr>
                <td width="20%">January</td>
                <td width="30%">January</td>
                <td width="20%">January</td>
                <td width="30%">January</td>
            </tr>
        </table>
    </div>
</div>
</body>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        myTable()
    });
    $(window).resize(function () {          //当浏览器大小变化时
        myTable()
    });
    function myTable() {
        var $header = $('#tableHeader')
        var $content = $('#tableContent')
        $content.show()
        $header.show()
        $header.css('width', Number($content[0].scrollWidth))
    }
</script>
</html>

分析：

要把表头和内容分开，这样才能做到固定表头，滚动条只作用于内容。

通过计算把内容除去滚动条的宽度scrollWidth，赋值给表头的宽度，保持一致。

因为表头的宽度是从默认宽度再变化为与内容相等，这个过程页面会闪动，为了更好的用户体验，通过css的display属性先把表头和内容隐藏，再通过jq的show()显示出来。