HTML+CSS+JS實(shí)現(xiàn)完美兼容各大瀏覽器的TABLE固定列
更新時(shí)間：2015年04月26日 11:03:10 投稿：hebedich
本文給大家分享的是使用HTML+CSS+JS實(shí)現(xiàn)完美兼容各大瀏覽器的TABLE固定列的方法和示例，非常的實(shí)用，特別是在BS架構(gòu)的企業(yè)級(jí)應(yīng)用，有需要的小伙伴可以參考下。
BS架構(gòu)的企業(yè)級(jí)應(yīng)用中，當(dāng)一個(gè)表格列數(shù)較多時(shí)，用戶一個(gè)常見(jiàn)的需求就是把前面幾個(gè)重要的列固定住，這樣拖動(dòng)滾動(dòng)條時(shí)固定的列會(huì)方便用戶查看數(shù)據(jù)，用戶體驗(yàn)很好。一些重量級(jí)的JS組件庫(kù)也都有這個(gè)功能，那么有沒(méi)有更簡(jiǎn)單的方法實(shí)現(xiàn)這個(gè)功能呢？
這個(gè)需求常見(jiàn)的解決方案是使用表格拼接的方法，這個(gè)方案如果要制作靜態(tài)的網(wǎng)頁(yè)，或者功能簡(jiǎn)單的動(dòng)態(tài)頁(yè)面，邏輯比較簡(jiǎn)單，技術(shù)上也不復(fù)雜，很容易實(shí)現(xiàn)，但是如果要做成組件，動(dòng)態(tài)功能較多的話，就需要寫(xiě)大量的冗余代碼，難以維護(hù)，甚至于一個(gè)簡(jiǎn)單的功能，都需要寫(xiě)很多的代碼，比如事件處理等，這個(gè)方法就顯得比較笨拙，靈活性很差，不是一個(gè)好的方案。
經(jīng)過(guò)長(zhǎng)時(shí)間的分析研究，各種場(chǎng)景的試驗(yàn)，我們找到了一個(gè)兼容性非常好的解決方案，總體上來(lái)講采用的是定位計(jì)算的方法，下面貼出代碼，然后做個(gè)解讀。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
<script type="text/javascript">
function divScroll(scrollDiv){
var scrollLeft = scrollDiv.scrollLeft;
document.getElementById("tableDiv_title").scrollLeft = scrollLeft;
document.getElementById("tableDiv_body").scrollLeft = scrollLeft;
}
function divYScroll(scrollYDiv){
var scrollTop = scrollYDiv.scrollTop;
document.getElementById("tableDiv_y").scrollTop = scrollTop;
}
function onwheel(event){
var evt = event||window.event;
var bodyDivY = document.getElementById("tableDiv_y");
var scrollDivY = document.getElementById("scrollDiv_y");
if (bodyDivY.scrollHeight>bodyDivY.offsetHeight){
if (evt.deltaY){
bodyDivY.scrollTop = bodyDivY.scrollTop + evt.deltaY*7;
scrollDivY.scrollTop = scrollDivY.scrollTop + evt.deltaY*7;
}else{
bodyDivY.scrollTop = bodyDivY.scrollTop - evt.wheelDelta/5;
scrollDivY.scrollTop = scrollDivY.scrollTop - evt.wheelDelta/5;
}
}
}
</script>
<style type="text/css">
body {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border:0;
border:none;
}
table td {
border:1px solid #000;
overflow:hidden;
padding:0 2px;
}
</style>
</head>
<body>
<div style="width:500px; position:relative; padding-right:18px;">
<div style="position:relative;height:368px;overflow:hidden;width:100%">
<div style="padding-left:108px; width:auto; overflow:hidden; background:#f00;" id="tableDiv_title" >
<table border="0" cellspacing="0" cellpadding="0" >
<tr>
<td style="min-width:30px; max-width:30px; left:0; top:0; width:30px; overflow:hidden; background-color:#f00;position:absolute;z-index:1;">000</td>
<td style="min-width:74px; max-width:74px; left:30px; top:0; width:74px; overflow:hidden; background-color:#f00;position:absolute;z-index:1;">自動(dòng)表格</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >最后一列</td>
</tr>
</table>
</div>
<div style="overflow:hidden; position:absolute;height:128px; width:100%;" id="tableDiv_y" onmousewheel="onwheel(event);" onwheel="onwheel(event);">
<div style="padding-left:108px; width:auto;overflow:hidden;" id="tableDiv_body">
<table border="0" cellspacing="0" cellpadding="0" >
<tr>
<td style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">001</td>
<td style="min-width:74px; max-width:74px; left: 30px; width: 74px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">自動(dòng)表格</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >最后一列</td>
</tr>
<tr>
<td style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff; position:absolute; z-index:1;">002</td>
<td style="min-width:74px; max-width:74px; left:30px; width:74px; overflow:hidden;background-color:#fff; position:absolute; z-index:1;">自動(dòng)表格</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >最后一列</td>
</tr>
<tr>
<td style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">003</td>
<td style="min-width:74px; max-width:74px;left: 30px; width: 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自動(dòng)表格</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >最后一列</td>
</tr>
<tr>
<td style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">004</td>
<td style="min-width:74px; max-width:74px; left: 30px; width: 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自動(dòng)表格</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >最后一列</td>
</tr>
<tr>
<td style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">005</td>
<td style="min-width:74px; max-width:74px; left: 30px; width: 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自動(dòng)表格</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >最后一列</td>
</tr>
<tr>
<td style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">006</td>
<td style="min-width:74px; max-width:74px; left: 30px; width: 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自動(dòng)表格</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >最后一列</td>
</tr>
<tr>
<td style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">007</td>
<td style="min-width:74px; max-width:74px; left: 30px; width: 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自動(dòng)表格</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >最后一列</td>
</tr>
<tr>
<td style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">008</td>
<td style="min-width:74px; max-width:74px; left: 30px; width: 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自動(dòng)表格</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >最后一列</td>
</tr>
<tr>
<td style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">009</td>
<td style="min-width:74px; max-width:74px; left: 30px; width: 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自動(dòng)表格</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >最后一列</td>
</tr>
<tr>
<td style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">010</td>
<td style="min-width:74px; max-width:74px; left: 30px; width: 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自動(dòng)表格</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >56454自動(dòng)</td>
<td style="min-width: 100px; max-width: 100px; width: 100px;" >最后一列</td>
</tr>
</table>
</div>
</div>
<div style="background-color:#eee;overflow:hidden;top:150px; width:100%; z-index:2;position:absolute;">
<div style="margin-left:108px; width:auto;overflow-x:scroll;overflow-y:hidden;" onscroll='divScroll(this);'>
<div style="width:630px; height:1px;"></div>
</div>
</div>
</div>
<div id="scrollDiv_y" style="display:block; overflow-x:hidden; overflow-y:scroll; position:absolute; top:22px; right:0px; height:118px; padding-bottom:10px;" onscroll='divYScroll(this);'>
<div style="width:1px; height:194px;"></div>
</div>
</div>
</div>
</body>
</html>
一、總體結(jié)構(gòu)：
頁(yè)面基本元素為DIV+TABLE，固定的列采用絕對(duì)定位的方式固定，每一列都要指定固定寬度，為了解決橫豎滾動(dòng)條的問(wèn)題，表頭和表體的外面分別包裹兩層DIV，滾動(dòng)條采用虛擬的方式，固定在固定位置通過(guò)JS控制模擬正常DIV滾動(dòng)條的效果。
二、定位：
固定的列要絕對(duì)定位，通過(guò)left屬性控制左側(cè)位移，為了保證固定列浮動(dòng)在上方，設(shè)置z-index為1,。為了保證有豎滾動(dòng)條時(shí)的正常顯示，表體的外層DIV為絕對(duì)定位，由此導(dǎo)致滾動(dòng)條也都要絕對(duì)定位。還有，表頭和表體以及滾動(dòng)條的內(nèi)層DIV通過(guò)margin-left屬性控制左側(cè)外邊距，把固定列的偏移量空余出來(lái)。
二、寬度計(jì)算：
每一列的寬度都要指定固定的值，并且要注意一個(gè)關(guān)鍵點(diǎn)，就是還要加上min-width和max-width屬性，這兩個(gè)屬性和width值相等，表頭表體的內(nèi)層DIV，寬度為auto，自適應(yīng)表格寬度，外層DIV寬度為100%，最外層的DIV通過(guò)padding-right屬性控制右側(cè)內(nèi)邊距，將豎滾動(dòng)條的位置空余出來(lái)。
三、高度計(jì)算：
因?yàn)榻^對(duì)定位的存在，整個(gè)表格組件的高度要指定，可以通過(guò)計(jì)算得出，豎滾動(dòng)條的top值也需要進(jìn)行計(jì)算。
四、滾動(dòng)條：
本方案一個(gè)突出特點(diǎn)，就是虛擬的滾動(dòng)條，就是通過(guò)一個(gè)和表格一樣寬、高度為一個(gè)像素的DIV模擬出表體DIV的橫向滾動(dòng)條，豎滾動(dòng)條同理。之所以采用這個(gè)形式，一個(gè)是橫向滾動(dòng)條這樣處理比較美觀，豎滾動(dòng)條這樣處理之后，表頭和表體的外層DIV寬度不用計(jì)算了，都為100%，否則存在滾動(dòng)條時(shí)，表頭和橫向滾動(dòng)條要空出豎滾動(dòng)條寬度的位移，否則無(wú)法對(duì)齊，這個(gè)計(jì)算倒不復(fù)雜，但是某些情況下存在問(wèn)題，在此不展開(kāi)了。
五、滾動(dòng)事件：
因?yàn)楸眢w的滾動(dòng)條都隱藏了，導(dǎo)致鼠標(biāo)滾輪不起作用了，這樣就需要用JS處理鼠標(biāo)滾輪事件，本文的樣例代碼兼容常見(jiàn)瀏覽器。這里的重點(diǎn)是同時(shí)寫(xiě)了onmousewheel和onwheel事件，onmousewheel兼容IE，在計(jì)算滾動(dòng)距離時(shí)，注意deltaY和wheelDelta屬性的差異即可。
六、優(yōu)缺點(diǎn)分析：
本文的解決方案已經(jīng)經(jīng)過(guò)精簡(jiǎn)，重點(diǎn)是講清楚原理，在我們的實(shí)際中，非常的復(fù)雜。這個(gè)設(shè)計(jì)考慮了非常多的兼容性，包括了瀏覽器的兼容性和各種場(chǎng)景的兼容性，如果需求簡(jiǎn)單，還有簡(jiǎn)化的空間。
這個(gè)方案的優(yōu)點(diǎn)是，如果要做組件的話，因?yàn)镠TML結(jié)構(gòu)簡(jiǎn)單，表頭和表體都是一個(gè)TABLE，JS控制代碼非常干凈，維護(hù)容易。缺點(diǎn)就是計(jì)算過(guò)多。我們認(rèn)為該方案比較適用于開(kāi)發(fā)組件的情況，靜態(tài)頁(yè)面就有點(diǎn)小題大作了。
以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。
相關(guān)文章
json 帶斜杠時(shí)如何解析的實(shí)現(xiàn)
這篇文章主要介紹了json 帶斜杠時(shí)如何解析的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
ajax級(jí)聯(lián)菜單實(shí)現(xiàn)方法實(shí)例分析
這篇文章主要介紹了ajax級(jí)聯(lián)菜單實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了基于ajax與后臺(tái)php交互實(shí)現(xiàn)級(jí)聯(lián)菜單功能的相關(guān)操作技巧,需要的朋友可以參考下2016-11-11
當(dāng)編輯某條數(shù)據(jù)時(shí)，再回過(guò)頭來(lái)進(jìn)行編輯，會(huì)發(fā)現(xiàn)，里面的數(shù)據(jù)和沒(méi)有編輯以前是一樣的，這就是ie緩存的問(wèn)題，下面是一個(gè)不錯(cuò)的解決方法2014-08-08
jQuery實(shí)現(xiàn)動(dòng)態(tài)添加、刪除按鈕及input輸入框的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)動(dòng)態(tài)添加、刪除按鈕及input輸入框的方法,涉及jQuery事件響應(yīng)及頁(yè)面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-04-04
JavaScript中的atob和btoa函數(shù)及base64編碼解碼詳解
在JavaScript中btoa和atob是兩個(gè)處理Base64編碼的全局函數(shù),它們通常用于在瀏覽器環(huán)境中對(duì)二進(jìn)制數(shù)據(jù)進(jìn)行編碼和解碼,這篇文章主要介紹了JavaScript中atob和btoa函數(shù)及base64編碼解碼的相關(guān)資料,需要的朋友可以參考下2025-04-04
JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)端播放攝像頭實(shí)時(shí)畫(huà)面
這篇文章主要介紹了如何利用JavaScript實(shí)現(xiàn)在網(wǎng)頁(yè)端播放局域網(wǎng)（不能上云）或是廣域網(wǎng)的攝像頭的實(shí)時(shí)畫(huà)面，文中的示例代碼講解詳細(xì)，需要的可以參考一下2022-02-02
這篇文章主要介紹了BootStrap selectpicker 的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
本文主要介紹了js控制文本框禁止輸入特殊字符的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04
Javascript實(shí)現(xiàn)簡(jiǎn)單的富文本編輯器附演示
這篇文章主要介紹了通過(guò)Javascript實(shí)現(xiàn)的簡(jiǎn)單富文本編輯器,需要的朋友可以參考下2014-06-06
這篇文章主要介紹了js 圖片懶加載的實(shí)現(xiàn)，幫助大家更好的優(yōu)化自身網(wǎng)頁(yè)，提高網(wǎng)頁(yè)響應(yīng)速度，感興趣的朋友可以了解下2020-10-10