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的寬度，就獲取內容區的寬度了。