HTML table 表格 thead 表头固定，tbody 滚动

最新推荐文章于 2025-01-04 08:05:46 发布

和她之间也曾有快乐

最新推荐文章于 2025-01-04 08:05:46 发布

阅读量7.5k

点赞数

分类专栏： C# 前端 javascript table

本文链接：https://blog.csdn.net/csdn_Info/article/details/79915850

版权

C# 同时被 3 个专栏收录

4 篇文章

订阅专栏

javascript

3 篇文章

订阅专栏

前端

2 篇文章

订阅专栏

本文介绍了两种实现HTML表格中thead表头固定，tbody内容区域滚动的方法。第一种推荐方式是通过CSS样式设置，第二种是利用JavaScript和CSS组合实现，但当表格数据量大时并不建议使用。

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

- 第一种方式实现
- 第二种方式实现

第一种方式实现

使用 css 样式设置thead 和 tbody 【推荐方式】

#tableid>thead>tr{
    display: table;
    width: 100%;
    table-layout: fixed;
}
#tableid>tbody{
    display: block;
    height: 271px;
    overflow-y: scroll;
}
#tableid>tbody>tr{
    display: table;
    width: 100%;
    table-layout: fixed;
}

第二种方式实现

【表格数据量很多不建议使用】

使用 js + css 实现
1. 使用 js 拷贝 table 表格，一个表格显示 thead,一个表格显示 tbody

//thead 元素
var thead=$("#tableid").clone();//克隆表格
var div=document.createElement('div');//创建DIV 元素，作为显示thead的容器
div.style.height='38px';//设置DIV元素高
div.style.overflowY='hidden';//设置Y轴滚动条为隐藏
thead.removeAttr('id');//删除表格ID，否则会重复ID
thead.appendTo(div);//将克隆的表格添加到DIV元素
$("#tableid").parent().prepend(div);//表格的父元素开头添加DIV元素

// tbody 元素
var div2=document.createElement('div');//作为显示tbody的容器
var tbody=$("#tableid").clone();
div2.style.maxHeight='500px';
div2.style.overflowY='auto';
tbody.children('thead').remove();
tbody.appendTo(div2);
$("#tableid").parent().append(div2);//表格的父元素结束添加DIV元素

$("#tableid").remove();