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;
}

 

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 内容的字符串。

 

参考文档：

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