DDR爱好者之家

html中table固定头部表格tbody可上下左右滑动
站长资源 2024/12/25 佚名
20 1538
DDR爱好者之家 Design By 杰米

当表格头部固定时，需要分为两个表格来做：一部分是thead，一部分是tbody，具体实现方式如下：

html代码：

<div class="table_box_big">
<div class="table_box">
    <table>
        <thead>
        <tr>
            <th><div>标题一</div></th>
            <th><div>标题二</div></th>
            <th><div>标题三</div></th>
            <th><div>标题标题标题标题标题标题标题标题标题四</div></th>
            <th><div>标题标题标题标题标题标题标题标题标题五</div></th>
            <th><div>标题标题标题标题标题标题标题标题标题六</div></th>
        </tr>
        </thead>
    </table>
    <div class="table_tbody_box">
        <table>
            <tr>
                <td>信息一</td>
                <td>信息二</td>
                <td>信息三</td>
                <td>信息信息信息信息信息信息信息信息信息四</td>
                <td>信息信息信息信息信息信息信息信息信息五</td>
                <td>信息信息信息信息信息信息信息信息信息六</td>
            </tr>
            <tr>
                <td>信息一</td>
                <td>信息二</td>
                <td>信息三</td>
                <td>信息信息信息信息信息信息信息信息信息四</td>
                <td>信息信息信息信息信息信息信息信息信息五</td>
                <td>信息信息信息信息信息信息信息信息信息六</td>
            </tr>
            <tr>
                <td>信息一</td>
                <td>信息二</td>
                <td>信息三</td>
                <td>信息信息信息信息信息信息信息信息信息四</td>
                <td>信息信息信息信息信息信息信息信息信息五</td>
                <td>信息信息信息信息信息信息信息信息信息六</td>
            </tr>
            <tr>
                <td>信息一</td>
                <td>信息二</td>
                <td>信息三</td>
                <td>信息信息信息信息信息信息信息信息信息四</td>
                <td>信息信息信息信息信息信息信息信息信息五</td>
                <td>信息信息信息信息信息信息信息信息信息六</td>
            </tr>
            <tr>
                <td>信息一</td>
                <td>信息二</td>
                <td>信息三</td>
                <td>信息信息信息信息信息信息信息信息信息四</td>
                <td>信息信息信息信息信息信息信息信息信息五</td>
                <td>信息信息信息信息信息信息信息信息信息六</td>
            </tr>
            <tr>
                <td>信息一</td>
                <td>信息二</td>
                <td>信息三</td>
                <td>信息信息信息信息信息信息信息信息信息四</td>
                <td>信息信息信息信息信息信息信息信息信息五</td>
                <td>信息信息信息信息信息信息信息信息信息六</td>
            </tr>
            <tr>
                <td>信息一</td>
                <td>信息二</td>
                <td>信息三</td>
                <td>信息信息信息信息信息信息信息信息信息四</td>
                <td>信息信息信息信息信息信息信息信息信息五</td>
                <td>信息信息信息信息信息信息信息信息信息六</td>
            </tr>
            <tr>
                <td>信息一</td>
                <td>信息二</td>
                <td>信息三</td>
                <td>信息信息信息信息信息信息信息信息信息四</td>
                <td>信息信息信息信息信息信息信息信息信息五</td>
                <td>信息信息信息信息信息信息信息信息信息六</td>
            </tr>
        </table>
    </div>
</div>

css样式：

.table_box_big {
 overflow-x: scroll;
 overflow-y: hidden;
 position: relative;
 height: 350px;
}
.table_box {
 overflow: hidden;
 position: absolute;
}
.table_tbody_box {
 height: 300px;
 overflow: scroll;
}
table {
 border: 1px solid #eeeeee;
}
table thead tr th {
 width: 80px;
 height: 50px;
 border-right: 1px solid #eeeeee;
 text-align: center;
 word-break: keep-all;
 padding: 2px 10px;
 background: skyblue;
}
table tbody tr td {
 width: 80px;
 height: 50px;
 border-right: 1px solid #eeeeee;
 text-align: center;
 border-bottom: 1px solid #eeeeee;
 word-break: keep-all;
 padding: 2px 10px;
}

实现效果如下：

html中table固定头部表格tbody可上下左右滑动

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米