固定table首行首列并可用鼠标调整页面宽度[转]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title>
<style>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title>
<style>
.fixedHeaderTr
{
z-index:10;
position:relative;
top:expression(this.offsetParent.scrollTop);
};
{
z-index:10;
position:relative;
top:expression(this.offsetParent.scrollTop);
};
.relativeTag
{
position:relative;
};
{
position:relative;
};
.fixedHeaderCol
{
{
background-color:#cccccc;
position:relative;
left:expression(this.parentElement.offsetParent.scrollLeft);
};
position:relative;
left:expression(this.parentElement.offsetParent.scrollLeft);
};
.mainDiv
{
overflow:auto;
scrollbar-face-color:9999ff;
height:expression((document.body.clientHeight-this.offsetTop-20>this.children[0].offsetHeight)?(this.children[0].offsetHeight+20) : (document.body.clientHeight-this.offsetTop-20));
width:expression(document.body.clientWidth-20);
}
</style>
{
overflow:auto;
scrollbar-face-color:9999ff;
height:expression((document.body.clientHeight-this.offsetTop-20>this.children[0].offsetHeight)?(this.children[0].offsetHeight+20) : (document.body.clientHeight-this.offsetTop-20));
width:expression(document.body.clientWidth-20);
}
</style>
<style>
.resizeDivClass
{
position:relative;
background-color:red;
width:1;
z-index:100;
float:right;
left:1;
cursor:e-resize;
}
.resizeDivClass
{
position:relative;
background-color:red;
width:1;
z-index:100;
float:right;
left:1;
cursor:e-resize;
}
</style>
<script language=javascript>
function MouseDownToResize(obj){
setTableLayoutToFixed();
obj.mouseDownX=event.clientX;
obj.pareneTdW=obj.parentElement.offsetWidth;
obj.pareneTableW=theObjTable.offsetWidth;
obj.setCapture();
}
function MouseMoveToResize(obj){
if(!obj.mouseDownX) return false;
var newWidth=obj.pareneTdW*1+event.clientX*1-obj.mouseDownX;
if(newWidth>0)
{
obj.parentElement.style.width = newWidth;
theObjTable.style.width=obj.pareneTableW*1+event.clientX*1-obj.mouseDownX;
}
}
function MouseUpToResize(obj){
obj.releaseCapture();
obj.mouseDownX=0;
}
setTableLayoutToFixed();
obj.mouseDownX=event.clientX;
obj.pareneTdW=obj.parentElement.offsetWidth;
obj.pareneTableW=theObjTable.offsetWidth;
obj.setCapture();
}
function MouseMoveToResize(obj){
if(!obj.mouseDownX) return false;
var newWidth=obj.pareneTdW*1+event.clientX*1-obj.mouseDownX;
if(newWidth>0)
{
obj.parentElement.style.width = newWidth;
theObjTable.style.width=obj.pareneTableW*1+event.clientX*1-obj.mouseDownX;
}
}
function MouseUpToResize(obj){
obj.releaseCapture();
obj.mouseDownX=0;
}
function setTableLayoutToFixed()
{
if(theObjTable.style.tableLayout=='fixed') return;
var headerTr=theObjTable.rows[0];
for(var i=0;i<headerTr.cells.length;i++)
{
headerTr.cells[i].styleOffsetWidth=headerTr.cells[i].offsetWidth;
}
for(var i=0;i<headerTr.cells.length;i++)
{
headerTr.cells[i].style.width=headerTr.cells[i].styleOffsetWidth;
}
theObjTable.style.tableLayout='fixed';
}
</script>
{
if(theObjTable.style.tableLayout=='fixed') return;
var headerTr=theObjTable.rows[0];
for(var i=0;i<headerTr.cells.length;i++)
{
headerTr.cells[i].styleOffsetWidth=headerTr.cells[i].offsetWidth;
}
for(var i=0;i<headerTr.cells.length;i++)
{
headerTr.cells[i].style.width=headerTr.cells[i].styleOffsetWidth;
}
theObjTable.style.tableLayout='fixed';
}
</script>
</head>
<body>
部分代码来自：<br>
部分代码来自：<br>
http://blog.csdn.net/wu_yongcai/archive/2004/11/21/189816.aspx
<br>
<div class="mainDiv" id=mailContainerDiv>
<table width="100%" cellspacing=0 border=1 style="margin-top:-2;margin-left:-1" id=theObjTable >
<TR class="fixedHeaderTr" style="background:navy;color:white;">
<TD nowrap class="fixedHeaderCol" style="background:navy;color:white;z-index:9;">
<font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>
Header A
</TD>
<TD nowrap class="fixedHeaderCol" style="background:navy;color:white;">
<font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>
Header B
</TD>
<TD nowrap>
<font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>
Header C
</TD>
</TR>
<TR class="relativeTag" >
<TD class="fixedHeaderCol" >A</TD>
<TD class="fixedHeaderCol" >B</TD>
<TD nowrap >
部分代码来自：<br>
http://blog.csdn.net/wu_yongcai/archive/2004/11/21/189816.aspx</TD>
</TR >
<TR class="relativeTag" >
<TD class="fixedHeaderCol" >A</TD>
<TD class="fixedHeaderCol">B</TD>
<TD>C</TD>
</TR>
<TR class="relativeTag" >
<TD class="fixedHeaderCol" >A</TD>
<TD class="fixedHeaderCol">B</TD>
<TD>C</TD>
</TR>
<TR class="relativeTag" >
<TD class="fixedHeaderCol" >A</TD>
<TD class="fixedHeaderCol">B</TD>
<TD>C</TD>
</TR>
<TR class="relativeTag" >
<TD class="fixedHeaderCol" >A</TD>
<TD class="fixedHeaderCol">B</TD>
<TD>C</TD>
</TR>
<TR class="relativeTag" >
<TD class="fixedHeaderCol" >A</TD>
<TD class="fixedHeaderCol">B</TD>
<TD>C</TD>
</TR>
<TR class="relativeTag" >
<TD class="fixedHeaderCol" >A</TD>
<TD class="fixedHeaderCol">B</TD>
<TD>C</TD>
</TR>
<TR class="relativeTag" >
<TD class="fixedHeaderCol" >A</TD>
<TD class="fixedHeaderCol">B</TD>
<TD>C</TD>
</TR>
<TR class="relativeTag" >
<TD class="fixedHeaderCol" >A</TD>
<TD class="fixedHeaderCol">B</TD>
<TD>C</TD>
</TR>
</table>
</div>
</body>
</html>
<br>
<div class="mainDiv" id=mailContainerDiv>
<table width="100%" cellspacing=0 border=1 style="margin-top:-2;margin-left:-1" id=theObjTable >
<TR class="fixedHeaderTr" style="background:navy;color:white;">
<TD nowrap class="fixedHeaderCol" style="background:navy;color:white;z-index:9;">
<font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>
Header A
</TD>
<TD nowrap class="fixedHeaderCol" style="background:navy;color:white;">
<font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>
Header B
</TD>
<TD nowrap>
<font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>
Header C
</TD>
</TR>
<TR class="relativeTag" >
<TD class="fixedHeaderCol" >A</TD>
<TD class="fixedHeaderCol" >B</TD>
<TD nowrap >
部分代码来自：<br>
http://blog.csdn.net/wu_yongcai/archive/2004/11/21/189816.aspx</TD>
</TR >
<TR class="relativeTag" >
<TD class="fixedHeaderCol" >A</TD>
<TD class="fixedHeaderCol">B</TD>
<TD>C</TD>
</TR>
<TR class="relativeTag" >
<TD class="fixedHeaderCol" >A</TD>
<TD class="fixedHeaderCol">B</TD>
<TD>C</TD>
</TR>
<TR class="relativeTag" >
<TD class="fixedHeaderCol" >A</TD>
<TD class="fixedHeaderCol">B</TD>
<TD>C</TD>
</TR>
<TR class="relativeTag" >
<TD class="fixedHeaderCol" >A</TD>
<TD class="fixedHeaderCol">B</TD>
<TD>C</TD>
</TR>
<TR class="relativeTag" >
<TD class="fixedHeaderCol" >A</TD>
<TD class="fixedHeaderCol">B</TD>
<TD>C</TD>
</TR>
<TR class="relativeTag" >
<TD class="fixedHeaderCol" >A</TD>
<TD class="fixedHeaderCol">B</TD>
<TD>C</TD>
</TR>
<TR class="relativeTag" >
<TD class="fixedHeaderCol" >A</TD>
<TD class="fixedHeaderCol">B</TD>
<TD>C</TD>
</TR>
<TR class="relativeTag" >
<TD class="fixedHeaderCol" >A</TD>
<TD class="fixedHeaderCol">B</TD>
<TD>C</TD>
</TR>
</table>
</div>
</body>
</html>
浙公网安备 33010602011771号