实现html table表头固定（css +html）

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

吃饱再多吃两口

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

阅读量1.1k

点赞数

分类专栏： html 文章标签： html css html5

本文链接：https://blog.csdn.net/qq_42977016/article/details/103581287

版权

通过CSS和HTML实现HTML table表头固定的详细步骤，包括使用colgroup控制列宽，设置表格体滚动，以及解决宽度适应问题。文章探讨了如何避免宽度误差并保持表头与表格体对齐。

摘要由CSDN通过智能技术生成

实现html table表头固定（css +html）

实现table表头固定的步骤
实现思路为：
1，两个table一个为头部，一个为表单部分。
2，利用colgroup
3，利用css来给滚动条留出位置

#本文非完全原创，思想取自各大博客，框架等。由于本人没办法找到博客地址，此部不贴原文链接。

先上代码!

<div class="wrapbox">
     <div class="table-head">
        <table class="tableHead">
            <colgroup align="center">
                <col width="100">
                <col width="100">
                <col width="300">
                <col width="100">
                <col width="200">
            </colgroup>
            <thead>
            <tr>
                <th>合同号</th>
                <th>签约客户</th>
                <th>发布客户</th>
                <th>合同状态</th>
                <th