<! DOCTYPE html>
<meta charset= "GBK" >
<title>table</title>
<body>
<table id= "tb_1" cellspacing= "0" cellpadding= "2" width= "100%" border= "1" >
<tbody>
<TR align= "center" bgcolor= "#dcdcdc" >
<TD style= "width:100px;" > User ID </td>
<td> trial Time </td><td> full time </td><td> sex </td><td> name Pinyin </td>
<td> Birthday </td><td> nationalities </td><td> Height </td>
</tr>
<tr>
<td>2000001</td>
<td>1997-3-13</td><td>1997-3-13</td><td>1</td><td>WZJ</td>
<td>1965-3-13</td><td> Han </td><td>171</td>
</tr>
<tr>
<td>2000045</td>
<td>2001-2-15</td><td>2001-3-15</td><td>0</td><td>WY</td>
<td>1978-8-5</td><td> Han </td><td>162</td>
</tr>
<tr>
<td>2000046</td>
<td>2001-2-23</td><td>2001-3-23</td><td>0</td><td>LQ</td>
<td>2001-2-23</td><td> Han </td><td>171</td>
</tr>
</tbody>
</table>
<script type= "Text/javascript" >
var TTD; The table Cell used to store the current change width to avoid the problem of moving the mouse quickly
var table = document.getElementById ("tb_1");
for (j = 0; J < Table.rows[0].cells.length; J + +) {
Table.rows[0].cells[j].onmousedown = function () {
Record cell
TTD = this;
if (Event.offsetx > Ttd.offsetwidth-10) {
Ttd.mousedown = true;
TTD.OLDX = Event.x;
Ttd.oldwidth = Ttd.offsetwidth;
}
Record table width
Table = TTD; while (table.tagname!= ' table ') table = table.parentelement;
Ttd.tablewidth = Table.offsetwidth;
};
Table.rows[0].cells[j].onmouseup = function () {
End width Adjustment
if (TTD = = undefined) TTD = this;
Ttd.mousedown = false;
TTD.style.cursor = ' default ';
};
Table.rows[0].cells[j].onmousemove = function () {
Change the mouse style
if (Event.offsetx > This.offsetwidth-10)
This.style.cursor = ' col-resize ';
Else
This.style.cursor = ' default ';
Remove the staging table Cell
if (TTD = = undefined) TTD = this;
Adjust width
if (Ttd.mousedown!= null && Ttd.mousedown = = True) {
TTD.style.cursor = ' default ';
if (Ttd.oldwidth + (EVENT.X-TTD.OLDX) >0)
Ttd.width = Ttd.oldwidth + (EVENT.X-TTD.OLDX);
Adjust column widths
TTD.style.width = Ttd.width;
TTD.style.cursor = ' col-resize ';
Adjust each cell in the column
Table = TTD; while (table.tagname!= ' table ') table = table.parentelement;
for (j = 0; J < Table.rows.length; J + +) {
Table.rows[j].cells[ttd.cellindex].width = Ttd.width;
}
Adjust the entire table
Table.width = Ttd.tablewidth + (ttd.offsetwidth–ttd.oldwidth);
Table.style.width = Table.width;
}
};
}
</script>
</body>
