bootstrap table 实现固定悬浮table 表头并可以水平滚动

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

在开发项目中，需要将表格头部固定，而且表格大多数情况下是会水平滚动的。项目的css框架是bootstrap 3，故也可以叫做bootstrap table。

需要实现的是：表格头部固定，并且支持水平滚动

html code(source table):

stylesheet code:

#fixed_table #fix_head{
background: #FFFFFF;
box-shadow: 0px 0px 5px #888888;
}

JS代码按效果不同有一些不同

效果一是浏览器滚动条滚动，头部固定:

效果二内容内部滚动，固定表格头部。js,html是基于效果一，Html,js,css 代码相对效果一有增加。

附生成 codepen.io中table thead和tbody 内容的php code:

<?php
$count = 30;echo '<tr id="table_head">';
for($i=0;$i<$count;$i++){
echo "<td>Test{$i}</td>";
}
echo '</tr>';echo "content trs---------------\r\n";$content_count = 30;
for($i = 0; $i < $content_count;$i++){
echo '<tr>';
for($j = 0;$j < $count;$j++){
echo "<td>content".($i+1)."</td>";
}
echo '</tr>';
}

如果当前电脑没有PHP运行环境，可以百度: php代码在线运行 ，点击进入搜索结果列表的一个，然后将php代码复制进代码输入框中，运行之后应该就可以看到生成的有tr td 内容的字符串。

参考文档：

css position:fixed时还能水平滚动，如何实现实现了固定头部的水平滚动
网页制作中在头部固定悬浮table表头(thead)的方法 javascript 主要代码来源
jquery outerHeight方法 outerWidth方法获取元素实际宽度高度学习获取元素实际宽度
firefox下table固定寬度解决Firefox浏览器下table宽度不识别
how to get innerWidth of an element in jquery WITHOUT scrollbar 效果二中，需要实现滚定头部不遮住内容滚动条，所以需要设定宽度。笔者是按照回答得到思路，笔者偷懒直接加一个div，直接获取这个div的宽度，就获取内容区的宽度了。