Effect diagram: Drag a vertical bar with a color position to drag the table width left and right, changing the width of the top and bottom
Disadvantage: Drag point extremely accurate, want to drag once to have patience
Then Post code:
HTML code
<html>
<head>
<meta http-equiv= "Content-type" content= "text/html"; charset=gb2312 ">
<style>
. Resizedivclass
{
Position:absolute;
Background-color:gray;
width:1;
z-index:1;
left:1;
cursor:e-resize;
}
. TD1 {
font-size:12px;
White-space:nowrap;
Overflow:hidden;
text-overflow:ellipsis;
color: #0000ff;
pos:expression (This.offsetleft*1+this.offsetwidth*1+tab.offsetleft);
}
</style>
<script language=javascript>
function mousedowntoresize (obj) {
Obj.mousedownx=event.clientx;
Objobj.parenetdw=obj.parentelement.offsetwidth;
Obj.parenetablew=tab.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;
Tab.style.width=obj.parenetablew*1+event.clientx*1-obj.mousedownx;
for (var i=1 i<=tab.rows (0). cells.length;i++) {
var obj = eval ("mydiv" +i);
objobj.style.left = Obj.parentelement.offsetleft*1+obj.parentelement.offsetwidth*1+tab.off Setleft;//obj.par EntElement.style.pos;
}
}
}
function mouseuptoresize (obj) {
Obj.releasecapture ();
obj.mousedownx=0;
}
function init () {
var tempstr = "";
for (var i=1 i<=tab.rows (0). cells.length;i++) {
tempstr = ' <div id= ' mydiv ' +i+ ' "class=" Resizedivclass "onmousedown=" mousedowntoresize (this); " Onmousemove= "Mousemovetoresize (This)," onmouseup= "mouseuptoresize (this);" ></div> ';
tab.rows (0). Cells (i-1). InnerHTML = tab.rows (0). Cells (i-1). Innerhtml+tempstr;
var obj = eval ("mydiv" +i);
objobj.style.left = Obj.parentElement.style.pos;
}
}
</script>
</head>
<body onload= "init ()" >
<table id=tab style= "table-layout:fixed;" >
<tr BGCOLOR=CCCCCC >
<TD valign=top class= "TD1" ><nobr> change table column width change </nobr></td>
<td valign=top class= "TD1" ><nobr> change table column width change </nobr></td>
<td valign=top class= "TD1" ><nobr> change table column width change </nobr></td>
</tr>
<tr>
<td class= "TD1" ><nobr> change table column width </nobr></td>
<td class= "TD1" ><nobr> change table column width </nobr></td>
<td class= "TD1" ><nobr> change table column width </nobr></td>
</tr>
</table>
</body>
</html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
