//样式
<style>
.tr-fixed-ff {
position: fixed;
left: 1%;
top: 0px;
width: 98%;
/* IE6改为绝对定位,并通过css表达式根据滚动位置更改top的值 */
_position: absolute;
_top: expression(eval(document.documentElement.scrollTop));
}
.tr-fixed-ie {
position: fixed;
left: 1%;
top: 0px;
/* IE6改为绝对定位,并通过css表达式根据滚动位置更改top的值 */
_position: absolute;
_top: expression(eval(document.documentElement.scrollTop));
}
</style>
//脚本
<script type="text/javascript">
//判断浏览器的脚本,直接修改别人的代码,拿来主义哈哈。
function getOs()
{
var OsObject = "";
if(navigator.userAgent.indexOf("MSIE")>0) {
return "MSIE";
}
if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
return "Firefox";
}
}
//使用jquery,对我要进行浮动的table里面的第一行进行样式的添加和移除。
$(document).ready(function(){
$(window).scroll( function() {
if($(window).scrollTop()>=95){//第一行tr相距top的距离为95
if(getOs() == "MSIE"){
$("#tr_scroll").addClass("tr-fixed-ie");
} else{
$("#tr_scroll").addClass("tr-fixed-ff");
}
} else{
if(getOs() == "MSIE"){
$("#tr_scroll").removeClass("tr-fixed-ie");
} else{
$("#tr_scroll").removeClass("tr-fixed-ff");
}
}
});
});
</script>
<body>
<table id="tr_scroll" width="100%" border="0" align="center" cellpadding="0" cellspacing="1" class="table_gray">
<tr class="td_gray" align="center">
<td width="7%">日期</td>
<td width="24%" height="20">工作任务</td>
<td width="5%">任务说明</td>
<td width="6%">分配人</td>
<td width="9%" class="td_padding_lr">开始日期</td>
<td width="9%">结束日期</td>
<td width="4%">优先级</td>
<td width="6%">计划工时</td>
<td width="6%">实际工时</td>
<td width="8%">协助人员</td>
<td width="5%">完成情况</td>
<td width="5%">未完成原因</td>
<td width="6%">状态</td>
</tr>
</table>
</body>
以上代码所达到的效果如下图:
刚开始:
[img]http://dl.iteye.com/upload/attachment/0069/4408/1412b8e5-274c-3e4f-a503-9ef203591465.png[/img]
浮动后:
[img]http://dl.iteye.com/upload/attachment/0069/4410/2445cb00-9a84-374d-987a-748b4f6a6ced.png[/img]
个人测试过了,在IE6和火狐下没问题。