ie ff 之resize

更新FF后,发现之前项目里的样式有比较大的问题,其实也算不上是更新后的问题,之前也存在只是现在更为明显些。后想想算了,找时间重构吧。

问题是这样,IE和FF里使用锁头的TABLE,代码不能很好的统一,CSS和JS都这样。后来网上找了资料,对问题进行了改进。

使用css固定表头,并结合JS让表格自适应高度


简单的表格,含thead和tbody
<div class="wzjGridTable">
<table cellpadding="0" cellspacing="0" border="0" id="tabClient">
<thead class="gridHeader">
<tr>
<td>标题</td>
</tr>
</thead>
<tbody class="gridContent">
<tr>
<td>内容</td>
</tr>
</tbody>
</table>
</div>



/*CSS*/
div.wzjGridTable{
position:absolute;
width:100%;
height:100%;
overflow:hidden;
_overflow-y:auto;
}
div.wzjGridTable table{
width:100%;
overflow:auto;
background:#FFFFFF;
}
div.wzjGridTable thead.gridHeader tr{
position: relative;
TOP: expression(this.offsetParent.scrollTop-1);
}



//js
if(navigator.appName.indexOf("Microsoft")!=-1){
setTableHeight_IE()
(window).bind("resize",function(){
setTableHeight_IE()
});
}else{
setTableHeight_FF()
window.onresize = setTableHeight_FF
}

function setTableHeight_FF(){
var titleHead=getHeight($(".toolbarDiv").css("height"))
var tool=getHeight($(".winTitle").css("height"))
var tabHead=getHeight($(".gridHeader").css("height"))
var finalH=document.body.clientHeight-titleHead-tool-tabHead;
$("#tabClient").css("height",finalH)
}

function setTableHeight_IE(){
var tabHead=getHeight($(".gridHeader tr td").css("height"))
var finalH=document.body.clientHeight-tabHead-tabHead;
$("div.wzjGridTable").css("height",finalH)
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章