我剛剛看到一篇文章,專門在解這個問題,不但可以解決,更是可以輕易的作到固定住前面幾個column,只讓水平捲軸拉動後面幾個column的高難度技巧喔
可是重點是,這個是針對IE所設計的解決方案,提供給各位作參考:
原文出處
以下是內容:
看到一篇文章，用css實現鎖定 HTML Table表頭和第一列，曾見過不少網友為鎖定DataGrid的表頭而傷腦筋，找到的很多實現方法都不盡如人意（最主要的問題就是表頭行中的列和表格其它行中的列的錯位），而這篇文章介紹的實現方法卻非常完美地解決了這個問題，而且還可以象Excel一樣鎖定表格的第一列...
為了避免文章過長,大家瀏覽不方便,所以我把html和css當成附加檔案供大家下載
這裡只提出重點部份
test.html
代碼:
...
<link rel="stylesheet" href="test.css" type="text/css">
<script type="text/javascript">
function lockCol(tblID) {
var table = document.getElementById(tblID);
var button = document.getElementById('toggle');
var cTR = table.getElementsByTagName('TR'); //collection of rows
if (table.rows[0].cells[0].className == '') {
for (i = 0; i < cTR.length; i++)
{
var tr = cTR.item(i);
tr.cells[0].className = 'locked'
}
button.innerText = "Unlock First Column";
}
else {
for (i = 0; i < cTR.length; i++)
{
var tr = cTR.item(i);
tr.cells[0].className = ''
}
button.innerText = "Lock First Column";
}
}
</script>
<button onClick="lockCol('tbl')" id="toggle">Lock First Column</button>
<div id="tbl-container">
<table id="tbl">
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
<div>
代碼:
...
div#tbl-container {
width: 418px;
height: 252px;
overflow: auto;
}
table {
table-layout: fixed;
border-collapse: collapse;
}
div#tbl-container table th {
width: 100px;
}
thead th, thead th.locked {
font-weight: bold;
text-align: center;
color: white;
border-right: 1px solid silver;
position:relative;
cursor: default;
}
thead th {
top: expression(document.getElementById("tbl-container").scrollTop-2); /*IE5+ only*/
z-index: 20;
}
thead th.locked {z-index: 30;}
td.locked, th.locked{
border-right: 1px solid silver;
left: expression(document.getElementById("tbl-container").scrollLeft); /*IE5+ only*/
position: relative;
z-index: 10;
}
td {
padding: 2px 5px 2px 2px;
font-size: 12px;
border-left: 1px solid silver;
border-bottom: 1px solid silver;
}
...
不過只限制在IE上,不能用在mozilla上,真是太不公平啦! >_<[/url]
登入
註冊
問答集
搜尋
)
