<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>电脑医生-奉献 QQ:343907552</title>
<style>
body {
background: #E6EAE9;
}
.fixedHeaderTr
{
z-index:10;
position:relative;
top:expression(this.offsetParent.scrollTop);
color:white;
background-color:#4f6b72;
font: 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
};
.fixedHeaderTd
{
color:white;
background-color:#4f6b72;
};
.relativeTag
{
font: 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
position:relative;
border:none;
border-bottom: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
};
.fixedHeaderCol
{
z-index:9;
background-color:#4f6b72;
position:relative;
left:expression(this.parentElement.offsetParent.scrollLeft);
color:white;
font: 12px "宋体", Verdana, Arial, Helvetica, sans-serif;
border:none;
border-bottom: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
};
.fixedHeaderCol_left
{
z-index:9;
background-color:#f2f3f7;
position:relative;
left:expression(this.parentElement.offsetParent.scrollLeft);
color:#000000;
font: 12px "宋体", Verdana, Arial, Helvetica, sans-serif;
border:none;
border-bottom: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
};
.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);
}
.resizeDivClass
{
position:relative;
/*background-color:#4f6b72;*/
width:4;
z-index:100;
float:right;
left:2;
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;
}
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>
</head>
<body>
自由拖动表格列宽,并且固定标题和首列(ACCESS数据库版)<br>
<br>
<div class="mainDiv" id=mailContainerDiv>
<table width="100%" border=1 cellspacing=0 bordercolor="#CCCCCC" id=theObjTable style="margin-top:-2; margin-left:-1px; BORDER-COLLAPSE:collapse ; background-color: #FFFFFF;" >
<TR class="fixedHeaderTr" >
<TD width="84" height="25" nowrap class="fixedHeaderCol">
<font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>
固定表头</TD>
<TD width="93" nowrap class="fixedHeaderTd" >
<font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>
表头1 </TD>
<TD width="115" nowrap >
<font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>
表头2 </TD>
<TD nowrap >
<font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>
表头3 </TD>
<TD nowrap >
<font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>
表头4 </TD>
<TD nowrap >
<font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>
Header C </TD>
<TD nowrap >
<font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>
Header C </TD>
</TR>
<TR class="relativeTag" onmousedown="sC('dtt1',1);" id=dtt1 onmouseover="getID('dtt1');" onmouseout=oC(1);>
<TD height="25" class="fixedHeaderCol_left" >A011123</TD>
<TD nowrap class="relativeTag" >沈惠</TD>
<TD nowrap class="relativeTag">沈惠</TD>
<TD nowrap class="relativeTag" > 内贸业务员 </TD>
<TD nowrap class="relativeTag" >
内贸业务员</TD>
<TD nowrap class="relativeTag" >
销售</TD>
<TD class="relativeTag">销售</TD>
</TR >
<TR class="relativeTag" onmousedown="sC('dtt2',1);" id=dtt2 onmouseover="getID('dtt2');" onmouseout=oC(1);>
<TD height="25" class="fixedHeaderCol_left" >A009123</TD>
<TD nowrap class="relativeTag" >闫冬</TD>
<TD nowrap class="relativeTag">闫冬</TD>
<TD nowrap class="relativeTag" > 内贸业务员 </TD>
<TD nowrap class="relativeTag" >
内贸业务员</TD>
<TD nowrap class="relativeTag" >
销售</TD>
<TD class="relativeTag">销售</TD>
</TR >
<TR class="relativeTag" onmousedown="sC('dtt3',1);" id=dtt3 onmouseover="getID('dtt3');" onmouseout=oC(1);>
<TD height="25" class="fixedHeaderCol_left" >A044123</TD>
<TD nowrap class="relativeTag" >许金飞</TD>
<TD nowrap class="relativeTag">许金飞</TD>
<TD nowrap class="relativeTag" > 内贸业务员 </TD>
<TD nowrap class="relativeTag" >
内贸业务员</TD>
<TD nowrap class="relativeTag" >
销售</TD>
<TD class="relativeTag">销售</TD>
</TR >
<TR class="relativeTag" onmousedown="sC('dtt4',1);" id=dtt4 onmouseover="getID('dtt4');" onmouseout=oC(1);>
<TD height="25" class="fixedHeaderCol_left" >C018123</TD>
<TD nowrap class="relativeTag" >吕庆艳</TD>
<TD nowrap class="relativeTag">吕庆艳</TD>
<TD nowrap class="relativeTag" > 档车工 </TD>
<TD nowrap class="relativeTag" >
档车工</TD>
<TD nowrap class="relativeTag" >
经编</TD>
<TD class="relativeTag">经编</TD>
</TR >
<TR class="relativeTag" onmousedown="sC('dtt5',1);" id=dtt5 onmouseover="getID('dtt5');" onmouseout=oC(1);>
<TD height="25" class="fixedHeaderCol_left" >C027123</TD>
<TD nowrap class="relativeTag" >蒲良娥</TD>
<TD nowrap class="relativeTag">蒲良娥</TD>
<TD nowrap class="relativeTag" > 档车工 </TD>
<TD nowrap class="relativeTag" >
档车工</TD>
<TD nowrap class="relativeTag" >
经编</TD>
<TD class="relativeTag">经编</TD>
</TR >
<TR class="relativeTag" onmousedown="sC('dtt6',1);" id=dtt6 onmouseover="getID('dtt6');" onmouseout=oC(1);>
<TD height="25" class="fixedHeaderCol_left" >D013123</TD>
<TD nowrap class="relativeTag" >王为辉</TD>
<TD nowrap class="relativeTag">王为辉</TD>
<TD nowrap class="relativeTag" > 操作工 </TD>
<TD nowrap class="relativeTag" >
操作工</TD>
<TD nowrap class="relativeTag" >
塑胶</TD>
<TD class="relativeTag">塑胶</TD>
</TR >
<TR class="relativeTag" onmousedown="sC('dtt7',1);" id=dtt7 onmouseover="getID('dtt7');" onmouseout=oC(1);>
<TD height="25" class="fixedHeaderCol_left" >D015123</TD>
<TD nowrap class="relativeTag" >赵刘勋</TD>
<TD nowrap class="relativeTag">赵刘勋</TD>
<TD nowrap class="relativeTag" > 操作工 </TD>
<TD nowrap class="relativeTag" >
操作工</TD>
<TD nowrap class="relativeTag" >
塑胶</TD>
<TD class="relativeTag">塑胶</TD>
</TR >
<TR class="relativeTag" onmousedown="sC('dtt8',1);" id=dtt8 onmouseover="getID('dtt8');" onmouseout=oC(1);>
<TD height="25" class="fixedHeaderCol_left" >D018123</TD>
<TD nowrap class="relativeTag" >孙太鹏</TD>
<TD nowrap class="relativeTag">孙太鹏</TD>
<TD nowrap class="relativeTag" > 操作工 </TD>
<TD nowrap class="relativeTag" >
操作工</TD>
<TD nowrap class="relativeTag" >
塑胶</TD>
<TD class="relativeTag">塑胶</TD>
</TR >
<TR class="relativeTag" onmousedown="sC('dtt9',1);" id=dtt9 onmouseover="getID('dtt9');" onmouseout=oC(1);>
<TD height="25" class="fixedHeaderCol_left" >D020123</TD>
<TD nowrap class="relativeTag" >王利辉</TD>
<TD nowrap class="relativeTag">王利辉</TD>
<TD nowrap class="relativeTag" > 操作工 </TD>
<TD nowrap class="relativeTag" >
操作工</TD>
<TD nowrap class="relativeTag" >
塑胶</TD>
<TD class="relativeTag">塑胶</TD>
</TR >
<TR class="relativeTag" onmousedown="sC('dtt10',1);" id=dtt10 onmouseover="getID('dtt10');" onmouseout=oC(1);>
<TD height="25" class="fixedHeaderCol_left" >D022123</TD>
<TD nowrap class="relativeTag" >孟小伟</TD>
<TD nowrap class="relativeTag">孟小伟</TD>
<TD nowrap class="relativeTag" > 操作工 </TD>
<TD nowrap class="relativeTag" >
操作工</TD>
<TD nowrap class="relativeTag" >
塑胶</TD>
<TD class="relativeTag">塑胶</TD>
</TR >
<TR class="relativeTag" onmousedown="sC('dtt11',1);" id=dtt11 onmouseover="getID('dtt11');" onmouseout=oC(1);>
<TD height="25" class="fixedHeaderCol_left" >D025123</TD>
<TD nowrap class="relativeTag" >畅会勇</TD>
<TD nowrap class="relativeTag">畅会勇</TD>
<TD nowrap class="relativeTag" > 操作工 </TD>
<TD nowrap class="relativeTag" >
操作工</TD>
<TD nowrap class="relativeTag" >
塑胶</TD>
<TD class="relativeTag">塑胶</TD>
</TR >
<TR class="relativeTag" onmousedown="sC('dtt12',1);" id=dtt12 onmouseover="getID('dtt12');" onmouseout=oC(1);>
<TD height="25" class="fixedHeaderCol_left" >D027123</TD>
<TD nowrap class="relativeTag" >刘景高</TD>
<TD nowrap class="relativeTag">刘景高</TD>
<TD nowrap class="relativeTag" > 操作工 </TD>
<TD nowrap class="relativeTag" >
操作工</TD>
<TD nowrap class="relativeTag" >
塑胶</TD>
<TD class="relativeTag">塑胶</TD>
</TR >
<TR class="relativeTag" onmousedown="sC('dtt17',1);" id=dtt17 onmouseover="getID('dtt17');" onmouseout=oC(1);>
<TD height="25" class="fixedHeaderCol_left" >D038123</TD>
<TD nowrap class="relativeTag" >陈德建</TD>
<TD nowrap class="relativeTag">陈德建</TD>
<TD nowrap class="relativeTag" > 操作工 </TD>
<TD nowrap class="relativeTag" >
操作工</TD>
<TD nowrap class="relativeTag" >
塑胶</TD>
<TD class="relativeTag">塑胶</TD>
</TR >
<TR class="relativeTag" onmousedown="sC('dtt21',1);" id=dtt21 onmouseover="getID('dtt21');" onmouseout=oC(1);>
<TD height="25" class="fixedHeaderCol_left" >D051123</TD>
<TD nowrap class="relativeTag" >张三鱼</TD>
<TD nowrap class="relativeTag">张三鱼</TD>
<TD nowrap class="relativeTag" > 操作工 </TD>
<TD nowrap class="relativeTag" >
操作工</TD>
<TD nowrap class="relativeTag" >
塑胶</TD>
<TD class="relativeTag">塑胶</TD>
</TR >
<TR class="relativeTag" onmousedown="sC('dtt22',1);" id=dtt22 onmouseover="getID('dtt22');" onmouseout=oC(1);>
<TD height="25" class="fixedHeaderCol_left" >D054123</TD>
<TD nowrap class="relativeTag" >徐燕武</TD>
<TD nowrap class="relativeTag">徐燕武</TD>
<TD nowrap class="relativeTag" > 操作工 </TD>
<TD nowrap class="relativeTag" >
操作工</TD>
<TD nowrap class="relativeTag" >
塑胶</TD>
<TD class="relativeTag">塑胶</TD>
</TR >
<TR class="relativeTag" onmousedown="sC('dtt23',1);" id=dtt23 onmouseover="getID('dtt23');" onmouseout=oC(1);>
<TD height="25" class="fixedHeaderCol_left" >D057123</TD>
<TD nowrap class="relativeTag" >孙用全</TD>
<TD nowrap class="relativeTag">孙用全</TD>
<TD nowrap class="relativeTag" > 操作工 </TD>
<TD nowrap class="relativeTag" >
操作工</TD>
<TD nowrap class="relativeTag" >
塑胶</TD>
<TD class="relativeTag">塑胶</TD>
</TR >
<TR class="relativeTag" onmousedown="sC('dtt24',1);" id=dtt24 onmouseover="getID('dtt24');" onmouseout=oC(1);>
<TD height="25" class="fixedHeaderCol_left" >D058123</TD>
<TD nowrap class="relativeTag" >陈玉昆</TD>
<TD nowrap class="relativeTag">陈玉昆</TD>
<TD nowrap class="relativeTag" > 操作工 </TD>
<TD nowrap class="relativeTag" >
操作工</TD>
<TD nowrap class="relativeTag" >
塑胶</TD>
<TD class="relativeTag">塑胶</TD>
</TR >
<TR class="relativeTag" onmousedown="sC('dtt25',1);" id=dtt25 onmouseover="getID('dtt25');" onmouseout=oC(1);>
<TD height="25" class="fixedHeaderCol_left" >D103123</TD>
<TD nowrap class="relativeTag" >朱国亮</TD>
<TD nowrap class="relativeTag">朱国亮</TD>
<TD nowrap class="relativeTag" > 操作工 </TD>
<TD nowrap class="relativeTag" >
操作工</TD>
<TD nowrap class="relativeTag" >
塑胶</TD>
<TD class="relativeTag">塑胶</TD>
</TR >
<TR class="relativeTag" onmousedown="sC('dtt26',1);" id=dtt26 onmouseover="getID('dtt26');" onmouseout=oC(1);>
<TD height="25" class="fixedHeaderCol_left" >D080123</TD>
<TD nowrap class="relativeTag" >周昌林</TD>
<TD nowrap class="relativeTag">周昌林</TD>
<TD nowrap class="relativeTag" > 操作工 </TD>
<TD nowrap class="relativeTag" >
操作工</TD>
<TD nowrap class="relativeTag" >
塑胶</TD>
<TD class="relativeTag">塑胶</TD>
</TR >
<TR class="relativeTag" onmousedown="sC('dtt27',1);" id=dtt27 onmouseover="getID('dtt27');" onmouseout=oC(1);>
<TD height="25" class="fixedHeaderCol_left" >G051123</TD>
<TD nowrap class="relativeTag" >王忠强</TD>
<TD nowrap class="relativeTag">王忠强</TD>
<TD nowrap class="relativeTag" > 操作工 </TD>
<TD nowrap class="relativeTag" >
操作工</TD>
<TD nowrap class="relativeTag" >
压延</TD>
<TD class="relativeTag">压延</TD>
</TR >
<TR class="relativeTag" onmousedown="sC('dtt28',1);" id=dtt28 onmouseover="getID('dtt28');" onmouseout=oC(1);>
<TD height="25" class="fixedHeaderCol_left" >G056123</TD>
<TD nowrap class="relativeTag" >陈利祥</TD>
<TD nowrap class="relativeTag">陈利祥</TD>
<TD nowrap class="relativeTag" > 操作工 </TD>
<TD nowrap class="relativeTag" >
操作工</TD>
<TD nowrap class="relativeTag" >
压延</TD>
<TD class="relativeTag">压延</TD>
</TR >
<TR class="relativeTag" onmousedown="sC('dtt29',1);" id=dtt29 onmouseover="getID('dtt29');" onmouseout=oC(1);>
<TD height="25" class="fixedHeaderCol_left" >G076123</TD>
<TD nowrap class="relativeTag" >刘成龙</TD>
<TD nowrap class="relativeTag">刘成龙</TD>
<TD nowrap class="relativeTag" > 操作工 </TD>
<TD nowrap class="relativeTag" >
操作工</TD>
<TD nowrap class="relativeTag" >
压延</TD>
<TD class="relativeTag">压延</TD>
</TR >
<TR class="relativeTag" onmousedown="sC('dtt30',1);" id=dtt30 onmouseover="getID('dtt30');" onmouseout=oC(1);>
<TD height="25" class="fixedHeaderCol_left" >G077123</TD>
<TD nowrap class="relativeTag" >张勋</TD>
<TD nowrap class="relativeTag">张勋</TD>
<TD nowrap class="relativeTag" > 操作工 </TD>
<TD nowrap class="relativeTag" >
操作工</TD>
<TD nowrap class="relativeTag" >
压延</TD>
<TD class="relativeTag">压延</TD>
</TR >
</table>
</div>
</body>
</script>
<!--例子四-->
<SCRIPT laguage="Javascript1.2">
var mydown = 0, myout = 0, tdID, clickedID, currentID, prevID; //Don't attempt to modify these variables
var fntcolor = "#333333", fntcolorhilite = "#333333"; //Font color on mouse over and out the td
var bgOver = "#CEE3FF", bgDown = "#CEE3FF", bgClickedout = "#CEE3FF", bgOut = ""; //Background color on mouse over, down, out after click, out without click
function getID(mytdID) { //Get current td ID on mouse over
tdID = mytdID;
currentID = document.all[mytdID];
currentID.bgColor = bgOver;
currentID.style.color = fntcolor;
}
function sC(clickID,myclick) { //Define ID that should be stored as last clicked td ID
mydown = myclick;
clickedID = clickID;
if ( prevID != null) {
prevID.bgColor = bgOut;
prevID.style.color = fntcolor;
}
else {
}
currentID.bgColor = bgDown;
}
function oC(myout) { //Detect whether the mouse is clicked or not
if (myout == 1 && mydown == 1) {
currentID.bgColor = bgClickedout;
currentID.style.color = fntcolorhilite;
prevID = document.all[clickedID];
mydown = 0;
}
else if (currentID == prevID) {
currentID.bgColor = bgClickedout;
currentID.style.color = fntcolorhilite;
}
else {
currentID.bgColor = bgOut;
}
}
</SCRIPT>
</html>