Effect diagram: Drag any position in the table to drag the table width, up and down width
Features: Easy to drag, text will not be covered by the line
Code:
HTML code
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" >
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta name= "generator" content= "EditPlus" >
<meta name= "Author" content= "" >
<meta name= "Keywords" content= "" >
<meta name= "Description" content= "" >
<script language= "JavaScript" >
var colnum=0;
var begin_x;
var begin_y;
var drag_flag = false;
Document.onmousedown = Mousedragbegin
Document.onmousemove = Mousedrag
document.onmouseup = Mousedragend
function Setdrag (col) {
Drag_flag = true;
Colcolnum = col;
}
function Mousedragbegin () {
if (drag_flag==true) {
begin_x = event.x;
begin_y = Event.y;
}
}
function Mousedrag () {
if (drag_flag==true) {
if (Window.event.button = = 1) {
var now_x = event.x;
var now_y = Event.y;
if (colnum==0) {
var value = colright1[0].style.pixelwidth + now_x-begin_x;
for (Var i=0;i<colright1.length;i++) {
colright1[i].style.pixelwidth = value;
}
if (colright1[0].style.pixelwidth <=10) {
for (Var i=0;i<colright1.length;i++) {
colright1[i].style.pixelwidth = 10;
}
}
begin_x = now_x;
}else if (colnum==1) {
var value = Colright2[0].style.pixelwidth + now_x-begin_x;
for (Var i=0;i<colright1.length;i++) {
colright2[i].style.pixelwidth = value;
}
if (colright2[0].style.pixelwidth <=10) {
for (Var i=0;i<colright2.length;i++) {
colright2[i].style.pixelwidth = 10;
}
}
begin_x = now_x;
}else if (colnum==2) {
var value = colright3[0].style.pixelwidth + now_x-begin_x;
for (Var i=0;i<colright1.length;i++) {
colright3[i].style.pixelwidth = value;
}
if (colright3[0].style.pixelwidth <=10) {
for (Var i=0;i<colright3.length;i++) {
colright3[i].style.pixelwidth = 10;
}
}
begin_x = now_x;
}else if (colnum==3) {
var value = Colright4[0].style.pixelwidth + now_x-begin_x;
for (Var i=0;i<colright1.length;i++) {
colright4[i].style.pixelwidth = value;
}
if (colright4[0].style.pixelwidth <=10) {
for (Var i=0;i<colright4.length;i++) {
colright4[i].style.pixelwidth = 10;
}
}
begin_x = now_x;
}
}
}
}
function Mousedragend () {
Drag_flag=false;
}
//-->
</script>
</HEAD>
<BODY>
<table id= "Tbltitle" border=0 cellspacing "=0 cellpadding =0 style=;" >
<tr height = 30>
<TD class= "Tdtitle" ><div id=colright1 style= "width:100px; Background-color:red "unselectable=" on "onmousedown=" Setdrag (0) ">000</DIV></td>
<td class= "Tdtitle" ><div id=colright2 "style="; Background-color:green "unselectable=" on "onmousedown=" Setdrag (1) ">111</DIV></td>
<td class= "Tdtitle" ><div id=colright3 "style="; Background-color:red "unselectable=" on "onmousedown=" Setdrag (2) ">222</DIV></td>
<td class= "Tdtitle" ><div id=colright4 "style="; Background-color:green "unselectable=" on "onmousedown=" Setdrag (3) ">333</DIV></td>
</tr>
<tr height = 30>
<td class= "Tdtitle" ><div id=colright1 "style="; Background-color:red "unselectable=" on "onmousedown=" Setdrag (0) ">000</DIV></td>
<TD class= "Tdtitle" ><div id=colright2 style= "width:100px; Background-color:green "unselectable=" on "onmousedown=" Setdrag (1) ">111</DIV></td>
<td class= "Tdtitle" ><div id=colright3 "style="; Background-color:red "unselectable=" on "onmousedown=" Setdrag (2) ">222</DIV></td>
<td class= "Tdtitle" ><div id=colright4 "style="; Background-color:green "unselectable=" on "onmousedown=" Setdrag (3) ">333</DIV></td>
</tr>
</TABLE>
</BODY>
</HTML>