bootstrap冻结表头功能实现

最新推荐文章于 2023-11-18 18:46:18 发布

小李小李彬彬有礼

最新推荐文章于 2023-11-18 18:46:18 发布

阅读量1.2k

点赞数

分类专栏：前端文章标签： bootstrap冻结表头

本文链接：https://blog.youkuaiyun.com/Peacock__/article/details/103403855

版权

本文介绍了在数据量较大时如何实现Bootstrap表格的表头冻结功能，确保在浏览长表格时表头始终保持可见。主要步骤包括：引入必要的CSS和JS资源，将表格放入div并添加特定样式，以及绑定冻结表头的事件处理。通过这三个步骤，可以达到预期的表头固定效果。

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

场景

当数据条数过多时，鼠标下滑浏览表格数据，预期表头一直在表格最上方，不随鼠标滑动而被滑出屏幕

实现步骤

①引入所需css和js。

下载链接：https://download.youkuaiyun.com/download/Peacock__/12251877

<!--冻结表头所需css-->
<link href="../static/css/bootstrap-table-fixed-header.css" rel="stylesheet"/>
 <!--冻结表头所需js-->
<script src="/js/bootstrap-table-fixed-header.js" type="text/javascript"></script>

②bootstrap-table表格放到div中，给div加个松开鼠标时执行的事件来模拟模拟鼠标滚动事件，以实现横向滚动条的移动，表头跟数据对应。并给表格添加class=“table table-striped table-fixed-header”

<!--bootstrap-table表格放到DIV中，加个松开鼠标时

最低0.47元/天解锁文章