table 表头固定

时间：2023-03-08 16:12:52
<html>

<head>

<title>Test</title>

<style type="text/css">

  .divClass{

    height:400px;

    width:25%;

    overflow:auto;

  }

  .divHeadClass{

    overflow:hidden;

  }

</style>

</head>

<body>

<div id="htmlDivID" class="divClass">

<table style="word-break: break-all;background-color:#7f9db9;" border="0" cellspacing="1" cellpadding="0" >

    <thead>

        <tr style="background-color:#dfdfdf;">

            <th width="20%" rowspan="1" colspan="1">Head</th>

            <th width="5%" rowspan="1" colspan="1">Count</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td width="20%" rowspan="1">head0</td>

            <td width="5%" rowspan="1">0</td>

        </tr>

        <tr>

            <td width="20%" rowspan="1">head50</td>

            <td width="5%" rowspan="1">50</td>

        </tr>

        <tr>

            <td width="20%" rowspan="1">head05</td>

            <td width="5%" rowspan="1">05</td>

        </tr>

        <tr>

            <td width="20%" rowspan="1">head40</td>

            <td width="5%" rowspan="1">40</td>

        </tr>

        <tr>

            <td width="20%" rowspan="1">head04</td>

            <td width="5%" rowspan="1">04</td>

        </tr>

        <tr>

            <td width="20%" rowspan="1">head70</td>

            <td width="5%" rowspan="1">70</td>

        </tr>

        <tr>

            <td width="20%" rowspan="1">head07</td>

            <td width="5%" rowspan="1">07</td>

        </tr>

        <tr>

            <td width="20%" rowspan="1">head10</td>

            <td width="5%" rowspan="1">01</td>

        </tr>

        <tr>

            <td width="20%" rowspan="1">head110</td>

            <td width="5%" rowspan="1">011</td>

        </tr>

        <tr>

            <td width="20%" rowspan="1">head02</td>

            <td width="5%" rowspan="1">02</td>

        </tr>

        <tr>

            <td width="20%" rowspan="1">head03</td>

            <td width="5%" rowspan="1">03</td>

        </tr>

        <tr>

            <td width="20%" rowspan="1">head066</td>

            <td width="5%" rowspan="1">066</td>

        </tr>

        <tr>

            <td width="20%" rowspan="1">head660</td>

            <td width="5%" rowspan="1">60</td>

        </tr>

        <tr>

            <td width="20%" rowspan="1">head055</td>

            <td width="5%" rowspan="1">055</td>

        </tr>

        <tr>

            <td width="20%" rowspan="1">head0</td>

            <td width="5%" rowspan="1">0</td>

        </tr>

        <tr>

            <td width="20%" rowspan="1">head0</td>

            <td width="5%" rowspan="1">0</td>

        </tr>

        <tr>

            <td width="20%" rowspan="1">head022</td>

            <td width="5%" rowspan="1">022</td>

        </tr>

        <tr>

            <td width="20%" rowspan="1">head220</td>

            <td width="5%" rowspan="1">220</td>

        </tr>

        <tr>

            <td width="20%" rowspan="1">head055</td>

            <td width="5%" rowspan="1">055</td>

        </tr>

        <tr>

            <td width="20%" rowspan="1">head034</td>

            <td width="5%" rowspan="1">034</td>

        </tr>

        <tr>

            <td width="20%" rowspan="1">head023</td>

            <td width="5%" rowspan="1">023</td>

        </tr>

        <tr>

            <td width="20%" rowspan="1">head021</td>

            <td width="5%" rowspan="1">021</td>

        </tr>

        <tr>

            <td width="20%" rowspan="1">head210</td>

            <td width="5%" rowspan="1">210</td>

        </tr>

        <tr>

            <td width="20%" rowspan="1">head012</td>

            <td width="5%" rowspan="1">012</td>

        </tr>

        <tr>

            <td width="20%" rowspan="1">head120</td>

            <td width="5%" rowspan="1">120</td>

        </tr>

        <tr>

            <td width="20%" rowspan="1">head0111</td>

            <td width="5%" rowspan="1">0111</td>

        </tr>

        <tr>

            <td width="20%" rowspan="1">head1110</td>

            <td width="5%" rowspan="1">1110</td>

        </tr>

    </tbody>

</table>

</div>

</body>

<script language="javascript">

    window.onload = function(){

        //获得存放表格的DIV

        var htmlDivDom = document.getElementById("htmlDivID");

        //获得表格的头部的偏移高度

        var theadHeight = htmlDivDom.children[0].children[0].offsetHeight;

        //创建可见的头部DIV

        var divHeadDom = document.createElement("<div class=\"divHeadClass\"></div>");

        //将创建的头部添加到表格DIV的前面

        htmlDivDom.parentNode.insertBefore(divHeadDom,htmlDivDom);

        //并设置其高度为表格头部的偏移高度

        divHeadDom.style.height = theadHeight;

        //克隆表格

        var htmlDivCloneDom = htmlDivDom.children[0].cloneNode(true);

        //将克隆表格添加到头部DIV中

        divHeadDom.appendChild(htmlDivCloneDom);

        //设置表格的顶边距

        htmlDivDom.children[0].style.marginTop = - theadHeight;

        //设置头部DIV的宽度：由表格DIV的偏移宽度-滚动条的宽度

        if(htmlDivDom.scrollHeight > htmlDivDom.clientHeight){

            var scrollWidth = getScrollWidth();

            divHeadDom.style.width = htmlDivDom.offsetWidth - scrollWidth;

        }else{

            divHeadDom.style.width = htmlDivDom.offsetWidth;

        }

        var rows = htmlDivDom.children[0].children[1].getElementsByTagName("tr");

        for(var i =0,len=rows.length;i < len;i++){

            if(i % 2 == 0){

                rows[i].style.backgroundColor = "#f9f9f9";

            }else{

                rows[i].style.backgroundColor = "#e5f1ff";

            }

        }

    }

    //创建一个DIV，添加到页面中，先得到没有滚动条的宽度，再得到有滚动条的宽度，两者的差就是滚动条的宽度

    function getScrollWidth(){

        var divDom = document.createElement("div");

        divDom.style.cssText = "position:absolute;top:-1000;height:100px;width:100px;overflow:hidden;";

        var noScrollWidth = document.body.appendChild(divDom).clientWidth;

        divDom.style.overflow = "scroll";

        var scrollWidth = divDom.clientWidth;

        return noScrollWidth - scrollWidth;

    }

</script>

</html>

table 表头固定

相关文章