table表頭行固定
大魚吃小雨,快魚吃慢雨,市場競爭無比激烈的今天,誰不以客戶為導向,以客戶為中心,時刻為客戶提供優質的服務,必然被市場無情的淘汰。
最近一個客戶希望:一次性將所有的資料全部展示出來,不需要分頁,且表頭行固定。這種資料量不大,一次性全部展示具有直觀、一目瞭然的作用,這種需求的確的很合理。故google一下,發現各位朋友的方法不計其數。歸納起來為以下幾點:
- 初始化表頭:表頭內容放入一個table中,計算表頭各列好百分比;
- 初始化正文DIV:正文DIV應用overflow-y: auto; overflow-x: hidden(顯縱不顯橫),固定其高度 height: 350px(可以指定);
- 顯示正文table放入正文DIV中,且將資料各列百分比和表頭各列保持一致。
如下所示:
<div id="report">
<table id="head" border="1" width="98%" cellpadding="0" cellspacing="0" bordercolor="#ffffff"
style="border-collapse: collapse; font-size: 12px; text-align: left; color: White;
font-weight: bold; background-color: Green;">
<tr>
<td style="width: 20%;
名稱
</td>
<td style="width: 20%; height: 30px; color: Red; word-break: break-all;">
性別
</td>
<td style="width: 20%; height: 30px; color: Red; word-break: break-all;">
職務
</td>
<td style="width: 20%;
學歷
</td>
<td style="width: 20%; height: 30px; color: Red; word-break: break-all;">
籍貫
</td>
</tr>
</table>
<div id="scroll" style="overflow-y: auto; overflow-x: hidden; height: 370px; width: 98%">
<table id="context" width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#ffffff"
style="border-collapse: collapse; font-size: 12px; text-align: left; color: White;
font-weight: bold; background-color: Gray;">
<tr>
<td style="width: 20%; height: 30px; color: Red; word-break: break-all;">
張三
</td>
<td style="width: 20%; height: 30px; color: Red; word-break: break-all;">
男
</td>
<td style="width: 20%; height: 30px; color: Red; word-break: break-all;">
段長
</td>
<td style="width: 20%; height: 30px; color: Red; word-break: break-all;">
本科
</td>
<td style="width: 20%; height: 30px; color: Red; word-break: break-all;">
北京
</td>
</tr>
</table>
</div>
</div>
問題:瀏覽相容性問題,經測試IE6,7都沒有問題,唯獨IE8出現了資料列和表頭列沒有對齊。
作為web應用開發,面對瀏覽器,我們始終處於弱勢,哪怕是瀏覽呈現出錯,我們也只能將錯就錯,在錯誤的基礎上達到我們的目的。
優化方案:經過分析,資料列和表頭列錯位的原因是滾動條佔有17px的寬度,影響資料列的百分比。試想一下,如果正文DIV始終比其中的內容Table多17px,那麼表頭table和內容table寬度則處於同一起點和終點。
如下所示:
<body style="margin-left: 20px; text-align: left;" onresize="dynTableSize();"
onload="dynTableSize(0.98,20,25,350)">
<div style="color: #0c2274; background-color: Blue; text-align: center;">
使用者資訊
</div>
<table id="menu" cellspacing="0" cellpadding="0" border="0" style="font-size: 12px;
width: 98%; background-color: Red;">
<tr>
<td>
查詢條件
</td>
</tr>
</table>
<div id="report">
<table id="head" border="1" width="98%" cellpadding="0" cellspacing="0" bordercolor="#ffffff"
style="border-collapse: collapse; font-size: 12px; text-align: left; color: White;
font-weight: bold; background-color: Green;">
<tr>
<td style="width: 20%; height: 30px; color: Red; word-break: break-all;">
名稱
</td>
<td style="width: 20%; height: 30px; color: Red; word-break: break-all;">
性別
</td>
<td style="width: 20%; height: 30px; color: Red; word-break: break-all;">
職務
</td>
<td style="width: 20%; height: 30px; color: Red; word-break: break-all;">
學歷
</td>
<td style="width: 20%; height: 30px; color: Red; word-break: break-all;">
籍貫
</td>
</tr>
</table>
<div id="scroll" style="overflow-y: auto; overflow-x: hidden; height: 370px; width: 98%">
<table id="context" border="1" cellpadding="0" cellspacing="0" bordercolor="#ffffff"
style="border-collapse: collapse; font-size: 12px; text-align: left; color: White;
font-weight: bold; background-color: Gray;">
<tr>
<td style="width: 20%; height: 30px; color: Red; word-break: break-all;">
張三
</td>
<td style="width: 20%; height: 30px; color: Red; word-break: break-all;">
男
</td>
<td style="width: 20%; height: 30px; color: Red; word-break: break-all;">
段長
</td>
<td style="width: 20%; height: 30px; color: Red; word-break: break-all;">
本科
</td>
<td style="width: 20%; height: 30px; color: Red; word-break: break-all;">
北京
</td>
</tr>
</table>
</div>
<script type="text/javascript">
//當且僅當顯示資料table高度大於div時則出現滾動條
//1.獲取table高度
//2.table高度>div高度則div的寬度 = 當時區域寬度 + 17px
//3.改變表頭的寬度
//4.改變查詢條件區域寬度
//5.記住表頭table(head)寬度為w百分比,
//6.內容(context)容器div的寬度為w百分比且內容(context)不需要百分比
//7.內容(context)中有個td內容換行。
//v_width:百分比,
//v_margin:margin-left ,
//v_hiegth:height,
//v_maxh:最大高度
function dynTableSize(v_width,v_margin,v_hiegth,v_maxh){
//正文預設高度
var v_nheight = 10;
try{
//正文實際高度
v_nheight = document.getElementById("context").childNodes[0].childNodes.length * v_hiegth;//正文的高度
}catch(e){}
//計算頁面的寬度
var nwidth=document.body.clientWidth * v_width - v_margin;
//滾動條寬度17px
//當前上下表格中的資料高度大於最大高度時才加上滾動條17px否則不加
if(v_nheight > v_maxh){
document.getElementById("scroll").style.width = nwidth+17;
}else{
document.getElementById("scroll").style.width = nwidth;
}
try{
//改變表頭的寬度
document.getElementById("head").style.width = nwidth;
//改變條件區域
document.getElementById("menu").style.width = nwidth;
}catch(e){}
}
</script>
</div>
</body>
實現過程:
- 捕獲body的load和onresize事件;
- 計算內容table的實際高度;
- 計算頁面的寬度;
- 判斷table實際高度是否超過指定最高高度?如果超過,則正文DIV實際寬度加上滾動條寬度17px;否則為實際寬度;
- 改變關聯的區域。
不足之處:捕獲body的load和onresize事件,會不會影響此方法在使用AJAX頁面的操作,有待檢驗?