对要锁定的行或列进行定位,设置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>
分享到:
相关推荐
今天校招笔试题要求实现一个首行首列固定,宽度自适应窗口变化,但窗口缩小到一定宽度不能再缩小,出现水平滚动条… 当时我写错了,我一时想不起改用什么办法首行首列固定,用绝对定位,父亲相对定位…这样会有很多...
CSS + JS 编写 可固定TABLE表格的首行与首列,可拖动查看更多内容 可二次开发,代码简单、易懂。
一个首行表头、最左列和最右列固定中间滚动的html table样式。 一个首行表头、最左列和最右列固定中间滚动的html table样式。 一个首行表头、最左列和最右列固定中间滚动的html table样式。 一个首行表头、最左列...
网络上收集的css table样式 好看table样式 好看的CSS——Table样式表
css锁定table的行与列,简单方便css锁定table的行与列,简单方便
css样式冻结表头,右侧滚动条滑动,表头锁定不动;...css样式冻结首列,下侧滚动条滑动,首列锁定不动; 另外,表中首列添加了复选框,css样式,仅供参考学习,可以根据情况改动 适合菜鸟初学,大神高手会觉得简单绕行
移动端项目,移动端table固定表头与固定第一列,HTML5和css3
CSS样式Table[6] - style-table
CSS样式TABLE的一些特效,做网页很有用的!
前几天有人问我,在Web开发当中,固定表格 的行和列,怎么做比较简单一点,我在这这里做了几个Demo,适用于table,当然也适用于各种表格控件。希望大家有时间看一下。Css学好是很重要的
好看的css table列表样式
漂亮的table样式(内附css) 漂亮的table样式(内附css)
HTML Table 漂亮的CSS 包含了格式各样的CSS,代码非常独立,肯定能够让你用到的。
纯css table 样式布局制作人口统计table表格样式代码 纯css table 样式布局制作人口统计table表格样式代码
CSS 美化Table,可以多选Table的行和列
好看的css table样式 常见用于报表相关
针对Table经常使用的CSS样式,样式不错。 也可以到http://coding.smashingmagazine.com/2008/08/13/top-10-css-table-designs/
CSS Table 样式 一 css3-table-price-hosting1
利用CSS控制表格table的交替颜色 代码和讲解部分
CSS样式Table - CSS3Tables