经过CSS样式锁定Table的首行首列
日期：2014-05-17 浏览次数：20876 次
通过CSS样式锁定Table的首行首列
?对要锁定的行或列进行定位，设置z-index，关键语句expression，top:expression($("#OutDiv").scrollTop());
通过某种机制，时刻调用，得到外层的div的滚动条scrollTop()坐标，设置该行的坐标。而expression为IE特有，但在IE8不在支持，可在开头加上<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />，以IE7解析。
本文只用于自己看，高手绕过。。。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>Only_Copy</title>
<script type="text/javascript" src="js/jquery-1.5.1.js"></script>
<script type="text/javascript">
</script>
<style type="text/css">
/*Table样式，无关紧要*/
#MyTable{
width:500px;
height:250px;
}
#MyTable td{
border:solid 1px #000;
}
/*冻结首行的样式*/
.freezeTr{
background-color:#9FF;
z-index:10;
/*定位，必定位*/
position:relative;
/*通过某种机制，时该执行，IE8不在支持，关键语句*/
top:expression($("#OutDiv").scrollTop());
}
/*冻结列的样式*/
.freezeTd{
background-color:#9FF;
z-index:9;
/*相对定位，不会乱，绝对定位会乱*/
position:relative;
/*通过某种机制，时该执行，IE8不在支持，关键语句*/
left:expression($("#OutDiv").scrollLeft());
}
</style>
</head>
<body>
<div id="OutDiv" style="width:300px;height:200px;overflow:scroll;">
<table id="MyTable">
<tr class="freezeTr">
<td class="freezeTd">冻结首行首列</td>
<td>冻结头A</td>
<td>冻结头B</td>
<td>冻结头C</td>
<td>冻结头D</td>
<td>冻结头E</td>
</tr>
<tr>
<td class="freezeTd">锁定列一</td>
<td>一</td>
<td>地</td>
<td>在</td>
<td>要</td>
<td>工</td>
</tr>
<tr>
<td class="freezeTd">锁定列二</td>
<td>上</td>
<td>是</td>
<td>中</td>
<td>国</td>
<td>同</td>
</tr>
<tr>
<td class="freezeTd">锁定列三</td>
<td>和</td>
<td>的</td>
<td>有</td>
<td>人</td>
<td>我</td>
</tr>
<tr>
<td class="freezeTd">锁定列四</td>
<td>主</td>
<td>产</td>
<td>不</td>
<td>为</td>
<td>这</td>
</tr>
<tr>
<td class="freezeTd">锁定列五</td>
<td>民</td>
<td>了</td>
<td>发</td>
<td>以</td>
<td>经</td>
</tr>
</table>
</div>
</body>
</html>
?
?
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
