BootStrap的table表頭固定tbody滾動的實例代碼
更新時間：2016年08月24日 10:35:24 作者：bbsyi
本文給大家分享一段關于BootStrap的table表頭固定tbody滾動的實例代碼,代碼簡單易懂，需要的朋友可以參考下
關于bootstrap table其他知識不多說，直接給大家貼代碼了。
關鍵代碼如下所示：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script src="iscroll.js"></script>
</head>
<body>
<div id="con" class="container">
<div id="2">
<table class="table table-bordered scrolltable">
<thead style="display:block;overflow-y: scroll;border-bottom:1px solid #eee;">
<tr>
<th>欄目一</th>
<th>欄目二</th>
<th>欄目三</th>
<th>欄目一</th>
<th>欄目二</th>
<th>欄目三</th>
</tr>
</thead>
<tbody style="display:block; max-height:200px;overflow-y: scroll;">
<tr>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
</tr>
<tr>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
</tr>
<tr>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
</tr>
<tr>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
</tr>
<tr>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
</tr>
<tr>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
</tr>
<tr>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
</tr>
<tr>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
var _width=$('#2').width();
$('#2 th:first-child').width(_width*0.1);
$('#2 td:first-child').width(_width*0.1);
$('#2 th:nth-child(2)').width(_width*0.2);
$('#2 td:nth-child(2)').width(_width*0.2);
$('#2 th:nth-child(3)').width(_width*0.3);
$('#2 td:nth-child(3)').width(_width*0.3);
$('#2 th:nth-child(4)').width(_width*0.1);
$('#2 td:nth-child(4)').width(_width*0.1);
$('#2 th:nth-child(5)').width(_width*0.1);
$('#2 td:nth-child(5)').width(_width*0.1);
$('#2 th:nth-child(6)').width(_width*0.2);
$('#2 td:nth-child(6)').width(_width*0.2);
})
</script>
</html>
以上所述是小編給大家介紹的BootStrap的table表頭固定tbody滾動的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
jQuery實現(xiàn)炫麗的3d旋轉(zhuǎn)星空效果
這篇文章主要介紹了jQuery實現(xiàn)炫麗的3d旋轉(zhuǎn)星空效果,涉及jQuery數(shù)值運算與頁面元素屬性動態(tài)變換相關操作技巧,需要的朋友可以參考下2018-07-07
在UpdatePanel內(nèi)jquery easyui效果失效的解決方法
項目中使用到了 updatePanel 和jquery-easyui 。使用updatepanel的好處自然是頁面不刷新，用戶感覺比較好，同時也減少了一部分數(shù)據(jù)量的傳輸。2010-04-04
這篇文章主要介紹了jQuery中attr()方法用法,實例分析了attr()方法的功能、定義及設置或返回匹配元素屬性值的使用技巧,需要的朋友可以參考下2015-01-01
這篇文章主要為大家詳細介紹了jQuery插件實現(xiàn)可輸入和自動匹配的下拉框,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
本文給大家介紹的nanoScrollerJS是一款使用簡單方式實現(xiàn) Mac OS X Lion 系統(tǒng)滾動條效果的jQuery插件。該滾動條插件利用原生的滾動條可以工作在 iPad、iPhone 和一些 Android Tablets上。2015-04-04
當使用ajax獲取data數(shù)據(jù)的時候，直接data.foo就可以得到。而較低版本的jquery就不行比如1.4之前，下面為大家介紹下jquery.post用法關于type設置問題2014-01-01
這篇文章主要介紹了JQuery CheckBox（復選框）操作方法匯總,本文講解了獲取單個checkbox選中項、獲取多個checkbox選中項、設置第一個checkbox 為選中值、設置最后一個checkbox為選中值等內(nèi)容,需要的朋友可以參考下2015-04-04
本文給大家?guī)淼氖鞘褂胘avascript結合jQuery實現(xiàn)返回頂部的功能，并附上源碼，送給大家，需要的童鞋直接拿走吧2014-11-11
不定義JQuery插件，不要說會JQuery，為什么這么說，請看下文2016-03-03
前面兩篇已經(jīng)道明了jQuery的核心框架。弄清楚了jQuery對象的組成，以及如何用extend方法來擴展庫。鏈式操作 也僅僅是方法體內(nèi)返回this。2011-06-06