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