web纯CSS固定表头滚动内容且表头对齐 - 附自动内容滚动javascript

最新推荐文章于 2023-03-08 06:00:00 发布

erplabour

最新推荐文章于 2023-03-08 06:00:00 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/erplabour/article/details/21227499

本文介绍了一种使用纯CSS实现的固定表头滚动效果，适用于表格数据展示场景。通过设置表达式高度和溢出自动滚动，使得内容区域能够滚动而表头保持不动，同时确保各列对齐。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

        div#datadiv {
            height: expression((window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight)*.87);
            overflow: auto;
        }

        table {
            border-spacing: 0;
            word-break: break-all;
            width: 100%;
        }
    </style>

//滚动函数
function scroll(objname) {

            if (document.getElementById(objname)) {
                var table = document.getElementById(objname).getElementsByTagName('tr')[0].parentNode;
                if (table.rows.length > 1) {
                    var row = table.getElementsByTagName('tr')[0];
                    table.appendChild(row);
                }
            }
        }
    </script>

</head>

<body>

<div id='headerdiv'>
        <table id='headertable'>
            <tr>
                <td width='11%'>OrderNumber</td>
                <td width='11%'>ItemNumber</td>
                <td width='11%'>BatchNo</td>
                <td width='9%'>InitiatedDate</td>
                <td width='7%'>Initiabedby</td>
                <td width='8%'>PlannedDate</td>
                <td width='7%'>Inspector</td>
                <td width='7%'>OvenBegining</td>
                <td width='7%'>OvenFinish</td>
                <td width='9%'>TestStatus</td>
                <td width='9%'>TestResult</td>
            </tr>
        </table>
    </div>

<div id='datadiv'>
        <table id='data'>
            <tr>
                <td width='11%'>PH10144</td>
                <td width='11%'>306</td>
                <td width='11%'>030314120(589-590)</td>
                <td width='9%'>2014-3-3</td>
                <td width='7%'>佳佳</td>
                <td width='8%'>2014-3-5</td>
                <td width='7%'>陈1</td>
                <td width='7%'>2014-3-3            </td>
                <td width='7%'>2014-3-4            </td>
                <td width='9%' class='Clete 完成'>Clete</td>
                <td width='9%' class='合格'>合格</td>
            </tr>
            <tr>
                <td width='11%'>PH130154</td>
                <td width='11%'>C30</td>
                <td width='11%'>17-02-14-119(719-721</td>
                <td width='9%'>2014-2-19</td>
                <td width='7%'>伟</td>
                <td width='8%'>2014-2-21</td>
                <td width='7%'>陈3</td>
                <td width='7%'></td>
                <td width='7%'></td>
                <td width='9%' class='Ongoing 进行中'>Ongoing 进行中</td>
                <td width='9%' class='确认中'>确认中</td>
            </tr>

</table>

</div>

</body>
</html>