首页 > 代码库 > bootstrap table 实现固定悬浮table 表头并可以水平滚动
bootstrap table 实现固定悬浮table 表头并可以水平滚动
在开发项目中，需要将表格头部固定，而且表格大多数情况下是会水平滚动的。项目的css框架是bootstrap 3，故也可以叫做bootstrap table。
需要实现的是：表格头部固定，并且支持水平滚动
html code(source table):
<table id="top_fix_table" border="0" cellpadding="4" cellspacing="0" class="table table-hover"> <thead> <tr id="table_head"> <td>Test</td> .... </tr> </thead> <tbody> </tbody></table>
stylesheet code:
#fixed_table #fix_head{ background: #FFFFFF; box-shadow: 0px 0px 5px #888888;}
Javascript code:
<script type="text/javascript">$(function(){ var sourceTable = $("#top_fix_table");//table id var sourceTableHead = $("#table_head");//table thead tr id var headHeight = sourceTableHead.height();//table thead tr height var sourceTableWidth = sourceTable.outerWidth(); //get source table width //copy table and thead html tag from source table, $(‘body‘).append(‘<div id="shelter"><table id="fixed_table" border="0" cellpadding="4" cellspacing="0" class="table table-hover"><thead></thead></table></div>‘); //only set top and left,beacuse i need the top bar can scroll left $("#shelter").css({‘height‘:headHeight,‘position‘:‘fixed‘,‘top‘:‘0‘,‘left‘:‘0‘}); //set target table width equal source table width $("#fixed_table").css({‘width‘:sourceTableWidth+"px"}); //only clone tr html and change thead tr id attr var targetHead = sourceTableHead.clone().attr(‘id‘,‘fix_head‘); targetHead.appendTo(‘#fixed_table thead‘); //mark target table thead td width,height equal source table thead td width,height $("#table_head td").each(function(index,value){ var tempWidth = $(value).outerWidth(); var tempHeight = $(value).outerHeight(); $("#fixed_table td").eq(index).css({‘width‘:tempWidth+"px",‘height‘:tempHeight+"px"}); }); $(window).scroll(function(){ //scroll left method var sl=-Math.max($(‘body‘).scrollLeft(),$(‘document‘).scrollLeft()); $(‘#shelter‘).css("left",sl+‘px‘); var scroll_top = $(‘body‘).scrollTop() - sourceTable.offset().top; //control show or hide if (scroll_top > 0) { $(‘#shelter‘).show(); }else { $(‘#shelter‘).hide(); } });});</script>
参考文档：
- css position:fixed时还能水平滚动，如何实现 实现了固定头部的水平滚动
- 网页制作中在头部固定悬浮table表头(thead)的方法 javascript 主要代码来源
- jquery outerHeight方法 outerWidth方法 获取元素实际宽度高度 学习获取元素实际宽度
bootstrap table 实现固定悬浮table 表头并可以水平滚动
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。