利用js+css+html實現(xiàn)固定table的列頭不動
更新時間：2016年12月08日 16:54:38 作者：扯
本文分享了利用js+css+html實現(xiàn)固定table的列頭不動的實例代碼。小編認為具有很好的參考價值，感興趣的朋友可以看下
話不多說，跟這小編來一起看下吧
1、CSS
<style type="text/css">
#scroll_head {
position: absolute;
display: none;
}
</style>
2、Javascript
<script type="text/javascript">
//該函數(shù)在上面一個table數(shù)據(jù)加載完成后調(diào)用
//把表頭的寬度設(shè)置到會滾動的頁頭去
var copyWidth = function () {
var b = $('#data_tbody').prev().find('tr:last').find('th');
var c = $('#scroll_head').find('tr:last').find('th');
for (var i = 0; i < b.length; i++) {
var newWith = b.eq(i).width();
if ($.browser.msie) {
newWith += 1;
}
c.eq(i).width(newWith);
}
}
$(function () {
$(window).scroll(function () {
if ($('#data_tbody').length > 0) {
var thead = $('#data_tbody').prev();
var thOffset = thead.offset();
var scTop = $(window).scrollTop(); //滾動條相對top的位置
if (scTop > thOffset.top) { //滾動條滾到thead及以下的位置，用臨時的thead代替顯示
$('#scroll_head').css('display', 'block');
$('#scroll_head').offset({ top: scTop, left: thOffset.left });
}
else { //滾動條滾到thead上的位置，用table的原始thead顯示
$('#scroll_head').css('display', 'none');
}
}
});
});
</script>
3、Html內(nèi)容
<div id="data_div">
<table>
@*thead內(nèi)容及樣式同scroll_head中的thead*@
@*thead使用深背景色，避免滾動時和tbody內(nèi)容重疊顯示*@
<thead>
<tr>
@*一級標題*@
<th class="tt1" colspan="2">一級1</th>
<th class="tt2" colspan="5">一級2</th>
<th class="tt3" colspan="6">一級3</th>
</tr>
<tr>
@*二級標題*@
<th style="width: 23px;">二級11</th>
<th style="width: 36px;">二級12</th>
<th class="tt" style="width: 40px;">二級21</th>
<th class="tt" style="width: 30px;">二級22</th>
<th class="tt" style="width: 30px;">二級23</th>
<th class="tt" style="width: 30px;">二級23</th>
<th class="tt" style="width: 30px;">二級24</th>
<th class="tt" style="width: 30px;">二級25</th>
<th class="tt" style="width: 30px;">二級31</th>
<th class="tt" style="width: 30px;">二級32</th>
<th class="tt" style="width: 30px;">二級33</th>
<th class="tt" style="width: 30px;">二級33</th>
<th class="tt" style="width: 30px;">二級34</th>
<th class="tt" style="width: 30px;">二級35</th>
<th class="tt" style="width: 30px;">二級36</th>
</tr>
</thead>
<tbody id="data_tbody">
數(shù)據(jù)內(nèi)容，在數(shù)據(jù)加載完成后調(diào)用copyWidth()函數(shù)解決兼容性
</tbody>
</table>
</div>
<div id="scroll_head" style="display:block; top: 168px; left: 0px; position: relative;">
<table width="100%">
<thead> @*thead使用深背景色，避免滾動時和tbody內(nèi)容重疊顯示*@
<tr>
@*一級標題*@
<th class="tt1" colspan="2">一級1</th>
<th class="tt2" colspan="5">一級2</th>
<th class="tt3" colspan="6">一級3</th>
</tr>
<tr>
@*二級標題*@
<th style="width: 23px;">二級11</th>
<th style="width: 36px;">二級12</th>
<th class="tt" style="width: 40px;">二級21</th>
<th class="tt" style="width: 30px;">二級22</th>
<th class="tt" style="width: 30px;">二級23</th>
<th class="tt" style="width: 30px;">二級23</th>
<th class="tt" style="width: 30px;">二級24</th>
<th class="tt" style="width: 30px;">二級25</th>
<th class="tt" style="width: 30px;">二級31</th>
<th class="tt" style="width: 30px;">二級32</th>
<th class="tt" style="width: 30px;">二級33</th>
<th class="tt" style="width: 30px;">二級33</th>
<th class="tt" style="width: 30px;">二級34</th>
<th class="tt" style="width: 30px;">二級35</th>
<th class="tt" style="width: 30px;">二級36</th>
</tr>
</thead>
</table>
</div>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，同時也希望多多支持腳本之家！
相關(guān)文章
JavaScript設(shè)計模式經(jīng)典之命令模式
命令模式（Command）的定義是：用來對方法調(diào)用進行參數(shù)化處理和傳送，經(jīng)過這樣處理過的方法調(diào)用可以在任何需要的時候執(zhí)行。接下來通過本文給大家介紹JavaScript設(shè)計模式經(jīng)典之命令模式，需要的朋友參考下2016-02-02
為數(shù)據(jù)添加append,remove功能...
2006-10-10 
這篇文章主要介紹了JS實現(xiàn)前端動態(tài)分頁碼代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-06-06 
這篇文章主要介紹了JS正則子匹配用法,結(jié)合簡單實例形式分析了js正則字匹配的概念、用法與相關(guān)注意事項,需要的朋友可以參考下
2016-12-12 
本文主要介紹了javascript的異步編程相關(guān)知識。具有一定的參考價值，下面跟著小編一起來看下吧
2017-01-01 
這篇文章主要為大家詳細介紹了js實現(xiàn)表格的隔行變色和上下移動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-02-02 
前端uniapp封裝網(wǎng)絡(luò)請求以及實際應(yīng)用教程
這篇文章主要給大家介紹了關(guān)于前端uniapp封裝網(wǎng)絡(luò)請求以及實際應(yīng)用的相關(guān)資料,在uniapp中進行網(wǎng)絡(luò)測試請求可以通過封裝網(wǎng)絡(luò)請求來實現(xiàn),文中給出了詳細的代碼實例,需要的朋友可以參考下
2024-01-01 
很多時候我們都把時間戳作為id值,下面這篇文章主要給大家介紹了關(guān)于JavaScript獲取當前時間戳的5種方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2023-10-10 
20分鐘輕松創(chuàng)建自己的Bootstrap站點
這篇文章主要教大家如何在短短的20分鐘內(nèi)輕松創(chuàng)建自己的Bootstrap站點，學會使用twitter bootstrap建立一個站點，從而鞏固Bootstrap一系列基礎(chǔ)知識，感興趣的小伙伴們可以參考一下
2016-05-05