js、css实现table表头固定

最新推荐文章于 2024-08-13 17:19:23 发布

STKingA1

最新推荐文章于 2024-08-13 17:19:23 发布

阅读量1.7k

点赞数 1

本文链接：https://blog.csdn.net/Eric19911992/article/details/60954773

版权

表头固定专栏收录该内容

1 篇文章 0 订阅

订阅专栏

原生table表头随表体一起上下滚动
在html中利用js、css将表头固定，可将原table拆分，分为表头table，表体table。
大致框架如：

<!--整体table-->
<table> 
    <tr>
        <td>
            <!--表头table-->
            <table>
                <!--只存放表头-->
                <th></th>
                <th></th>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            <!--表体table-->
            <table>
                <!--存放表数据-->
                <tr>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                </tr>
            </table>
        </td>
    </tr>
</table>

但是，这种情况适合没有滚动条的情况，一旦出现滚动条，则表头和表体会有偏离。因此，我们可以在开始的时候根据滚动条的宽度来用css设置表头的偏离位置。
代码如下：

<html>
<head>
    <title>
    </title>
    <style>
    .table th,.table td{
        min-width:60px;
    }
    table{
         empty-cells:show; 
         border-collapse: collapse;
         margin:0 auto;
    }
     .scrolltable{overflow-x:hidden; overflow-y: scroll; width: 100%;}
    </style>

</head>
<body>

    <!--fixed thead begin-->
    <div style="margin-left: 10px; margin-right:0px; overflow-x: auto;">
        <table  width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td>
                    <div style="margin-left:10px;">
                        <table align="center" border="0"
                                style="font-size: 12px; margin-left: 0px; 
                                margin-bottom: 0px; margin-right: 16px;"
                                id="table1"
                                class="table table-bordered table-striped table-hover">
                            <tr>
                                <!-- 这里存放表头名称,例如：
                                    <th >用户号</th>               
                                -->
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
            <tr>
                <td align="center" width="100%">
                    <div style="overflow-y: auto;margin-left:0px;" 
                            align="center" class="scrolltable">
                        <table class="table table-bordered table-striped table-hover"
                                id="searchresult" style="font-size: 12px">
                            <thead id="thead" style="display: none;"></thead>
                            <!--
                                这里存放列表内容（后台获取的值 datalist）
                                    <tr>
                                        <td></td>
                                    </tr>
                                例如
                            -->
                        </table>
                    </div>
                </td>
            </tr>
        </table>
    </div>
    <!--fixed thead end-->
</body>
</html>

将其设置为居右16px；这个宽度基本上和滚动条的宽度一致，也可以自由设定
还需要js控制其宽度，若没有滚动条则居右0px；需要js检测表中div是否有滚动条
js代码：

$(function(){
    <!--获取屏幕高度-->
    var y = window.screen.availHeight;
    <!--设置滚动div高度-->
    document.getElementsByClassName("scrolltable")[0].style.height=y-400+"px";

    <!--获取表体行数-->
    var rows = document.getElementById("searchresult").rows.length;
    <!--获取表头行数-->
    var rows2 = document.getElementById("table1").rows.length;
    <!--如果结果存在的话-->
    if(rows > 0){
        <!--获取结果集的列数-->
        var cells = document.getElementById("searchresult").rows[0].cells.length;
        for(var i=0;i<cells;i++){   
            <!--循环遍历，将表体每列宽度赋值为表头对应列的宽度-->
            document.getElementById("table1").rows[0].cells[i].width
                            =document.getElementById("searchresult").rows[0].cells[i].offsetWidth;
        }
        <!--获取滚动区-->
        var obj = document.getElementById("datatable");
        if(obj.scrollHeight > obj.clientHeight || obj.offsetHeight > obj.clientHeight){
        }else{
            <!--如果没有滚动条，则居右0px-->
            document.getElementById("fixthead").style.marginRight = "0px";
        }
    }

})