bootstraptable实现固定悬浮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.    实现了固定头部的⽔平滚动
2.  javascript 主要代码来源
3.  学习获取元素实际宽度
4.  解决Firefox浏览器下table宽度不识别
5.  效果⼆中，需要实现 滚定头部不遮住内容滚动条，所以需要设定宽度。笔者是按照回答得到思路，笔者偷懒直接加⼀个div，直接获
取这个div的宽度，就获取内容区的宽度了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。