Copy Code code as follows:
<title> drag a column wide table </title>
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<style type= "Text/css" ><!--
. BG td{
font-size:12px;
Text-align:left;
line-height:15px;
height:20px;
}
. BG td.tit{
Background-color: #e2e2e2;
height:17px;
Text-align:center;
line-height:15px;
}
. BG td.num{
Background-color: #e2e2e2;
Text-align:right;
line-height:15px;
width:30px;
height:22px;
}
. resizedivclass{
Text-align:right;
width:1px;
margin:0px 0 0px 0;
Background: #fff;
border:0px;
Float:right;
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>10)
{
var theobjtable = document.getElementById ("theobjtable");
Obj.parentElement.style.width = Newwidth;
Theobjtable.style.width=obj.parenetdw*1+event.clientx*1-obj.mousedownx;
}
}
function Mouseuptoresize (obj) {
Obj.releasecapture ();
obj.mousedownx=0;
}
function settablelayouttofixed ()
{
var theobjtable = document.getElementById ("theobjtable");
if (theobjtable.style.tablelayout== ' fixed ') return;
var headertr=theobjtable.rows[0];
for (Var i=0;i{
Headertr.cells[i].styleoffsetwidth=headertr.cells[i].offsetwidth;
}
for (Var i=0;i{
Headertr.cells[i].style.width=headertr.cells[i].styleoffsetwidth;
}
theobjtable.style.tablelayout= ' fixed ';
}
function Theobjtable (o,a,b,c) {
var T=document.getelementbyid (o). getElementsByTagName ("tr");
for (Var i=0;i<t.length;i++) {
T[i].style.backgroundcolor= (t[i].sectionrowindex%2==0) a:b;
T[i].onclick=function () {
if (this.x!= "1") {
}else{
this.x= "0";
This.style.backgroundcolor= (this.sectionrowindex%2==0) a:b;
}
}
T[i].onmouseover=function () {
if (this.x!= "1") this.style.backgroundcolor=c;
}
T[i].onmouseout=function () {
if (this.x!= "1") this.style.backgroundcolor= (this.sectionrowindex%2==0)? a:b;
}
}
}
--></script>
<body>
<table width= "100%" class= "BG" border=1 cellspacing=0 "#7b7b7b" bordercolorlight= "#efefef" bordercolordark= " Theobjtable ">
<tr>
<TD class= "num" > Serial number </td>
<TD width= 100px class= >
<span class= "Resizedivclass" onmousedown= "Mousedowntoresize" (this); "Onmousemove=" mousemovetoresize (this); " Onmouseup= "Mouseuptoresize (this);" ></span>
Company Name
</td>
<TD class= >
<span class= "Resizedivclass" onmousedown= "Mousedowntoresize" (this); "Onmousemove=" mousemovetoresize (this); " Onmouseup= "Mouseuptoresize (this);" ></span>
Order Customer
</td>
<TD class= >
<span class= "Resizedivclass" onmousedown= "Mousedowntoresize" (this); "Onmousemove=" mousemovetoresize (this); " Onmouseup= "Mouseuptoresize (this);" ></span>
Department
</td>
<TD class= >
<span class= "Resizedivclass" onmousedown= "Mousedowntoresize" (this); "Onmousemove=" mousemovetoresize (this); " Onmouseup= "Mouseuptoresize (this);" ></span>
Salesman
</td>
<TD class= >
<span class= "Resizedivclass" onmousedown= "Mousedowntoresize" (this); "Onmousemove=" mousemovetoresize (this); " Onmouseup= "Mouseuptoresize (this);" ></span>
Method of payment
</td>
</tr>
<tr>
<TD class= "num" >1</td>
<TD > China Telecom </td>
<TD > Order Customer Name </td>
<TD > Advertising Department </td>
<td > Wang Tian Kai </td>
<TD > Cash </td>
</tr>
<tr>
<TD class= "num" >2</td>
<TD > China Mobile </td>
<TD > Order Customer Name </td>
<TD > Marketing Department </td>
<td > Li Xiaohong </td>
<TD > Credit Card </td>
</tr>
<tr>
<TD class= "num" >3</td>
<TD > China Unicom </td>
<TD > Order Customer Name </td>
<TD > Marketing Department </td>
<td > King Dick </td>
<TD > Bank card </td>
</tr>
</table>
<script language= "JavaScript" ><!--
SENFE ("Table name", "Odd row Background", "even line background", "Mouse over Background", "click Background");
Theobjtable ("Theobjtable", "#c0c0c0", "#fff", "#a3a2a2");
--></script>
</body>