Effect diagram: Drag the red vertical bar to drag the table width left and right, changing the width of the top and bottom
Features: Drag easy, AAA column text drag will not be overwritten, DDD column text will be covered by the form line
Code:
HTML code
<style>
. Resizedivclass
{
position:relative;
background-color:red;
Width:2;
Z-index:1;
Left:expression (this.parentelement.offsetwidth-1);
Cursor:e-resize;
}
</style>
<script language=javascript>
function mousedowntoresize (obj) {
Obj.mousedownx=event.clientx;
Objobj.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;
}
</script>
<body>
Change the column width of table
<table id=theobjtable stylE= "table-layout:fixed"
<tr bgcolor=cccccc
<td valign=top
<font class= " Resizedivclass "onmousedown=" mousedowntoresize (This), "onmousemove=" mousemovetoresize (this); " Onmouseup= "Mouseuptoresize (this);" ></font>
Aaa</td>
<td valign=top
<font class= "Resizedivclass" Mousedowntoresize (This), "onmousemove=" mousemovetoresize (this); " Onmouseup= "Mouseuptoresize (this);" ></font>
Ddd</td>
<td valign=top
<font class= "Resizedivclass" Mousedowntoresize (This), "onmousemove=" mousemovetoresize (this); " Onmouseup= "Mouseuptoresize (this);" ></font>
Ddd</td>
</tr>
<tr>
<td> Happiness is not because of having more, but about less. </td><td>bbbb</td><td>dddd</td>
</tr>
</table>
</body
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
