Copy codeThe Code is as follows:
<! Doctype html>
<Html>
<Head>
<Meta charset = "gbk">
<Title> table </title>
</Head>
<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> finalize time </td> <td> gender </td> <td> name: pinyin </td>
<Td> birthdate </td> <td> ethnicity </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> </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> SCSI </td>
<Td> </td> <td> Han </td> <td> 171 </td>
</Tr>
</Tbody>
</Table>
<Script type = "text/javascript">
Var tTD; // used to store the Table Cell with the currently changed width, avoiding 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 Cells
TTD = this;
If (event. offsetX> tTD. offsetWidth-10 ){
TTD. mouseDown = true;
TTD. oldX = event. x;
TTD. oldWidth = tTD. offsetWidth;
}
// Record the Table width
// Table = tTD; while (table. tagName! = 'Table') TABLE = table. parentElement;
// TTD. tableWidth = table. offsetWidth;
};
Table. rows [0]. cells [j]. onmouseup = function (){
// Adjust the end width
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 ';
// Retrieve the temporary Table Cell
If (tTD = undefined) tTD = this;
// Adjust the 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 the column width
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>
</Html>