Copy codeThe Code is as follows: <Title> drag a table with column width </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<Style type = "text/css"> <! --
. Bg td {
Font-size: 12px;
Text-align: left;
Line-height: 15px;
Height: 20px;
}
. Bg td. tit {
Background-color: # e2e2e2;
Height: 17px;
Text-align: center;
Line-height: 15px;
}
. Bg td. num {
Background-color: # e2e2e2;
Text-align: right;
Line-height: 15px;
Width: 30px;
Height: 22px;
}
. ResizeDivClass {
Text-align: right;
Width: 1px;
Margin: 0px 0 0px 0;
Background: # fff;
Border: 0px;
Float: right;
Cursor: e-resize;
}
--> </Style>
<Script language = "javascript"> <! --
Function MouseDownToResize (obj ){
SetTableLayoutToFixed ();
Obj. mouseDownX = event. clientX;
Obj. 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> 10)
{
Var theObjTable = document. getElementById ("theObjTable ");
Obj. parentElement. style. width = newWidth;
TheObjTable. style. width = obj. pareneTdW * 1 + event. clientX * 1-obj.mouseDownX;
}
}
Function MouseUpToResize (obj ){
Obj. releaseCapture ();
Obj. mouseDownX = 0;
}
Function setTableLayoutToFixed ()
{
Var theObjTable = document. getElementById ("theObjTable ");
If (theObjTable. style. tableLayout = 'fixed') return;
Var headerTr = theObjTable. rows [0];
For (var I = 0; I {
HeaderTr. cells [I]. styleOffsetWidth = headerTr. cells [I]. offsetWidth;
}
For (var I = 0; I {
HeaderTr. cells [I]. style. width = headerTr. cells [I]. styleOffsetWidth;
}
TheObjTable. style. tableLayout = 'fixed ';
}
Function theObjTable (o, a, B, c ){
Var t = document. getElementById (o). getElementsByTagName ("tr ");
For (var I = 0; I <t. length; I ++ ){
T [I]. style. backgroundColor = (t [I]. sectionRowIndex % 2 = 0 )? A: B;
T [I]. onclick = function (){
If (this. x! = "1 "){
} Else {
This. x = "0 ";
This. style. backgroundColor = (this. sectionRowIndex % 2 = 0 )? A: B;
}
}
T [I]. onmouseover = function (){
If (this. x! = "1") this. style. backgroundColor = c;
}
T [I]. onmouseout = function (){
If (this. x! = "1") this. style. backgroundColor = (this. sectionRowIndex % 2 = 0 )? A: B;
}
}
}
// --> </Script>
<Body>
<Table width = "100%" class = "bg" border = 1 cellspacing = 0 bordercolorlight = "# 7b7b7b" bordercolordark = "# efefef" id = "theObjTable">
<Tr>
<Td class = "num"> NO. </td>
<Td width = "100px" class = "tit">
<Span class = "resizeDivClass" onMouseDown = "MouseDownToResize (this);" onMouseMove = "MouseMoveToResize (this);" onMouseUp = "MouseUpToResize (this);"> </span>
Company Name
</Td>
<Td class = "tit">
<Span class = "resizeDivClass" onMouseDown = "MouseDownToResize (this);" onMouseMove = "MouseMoveToResize (this);" onMouseUp = "MouseUpToResize (this);"> </span>
Order customer
</Td>
<Td class = "tit">
<Span class = "resizeDivClass" onMouseDown = "MouseDownToResize (this);" onMouseMove = "MouseMoveToResize (this);" onMouseUp = "MouseUpToResize (this);"> </span>
Department
</Td>
<Td class = "tit">
<Span class = "resizeDivClass" onMouseDown = "MouseDownToResize (this);" onMouseMove = "MouseMoveToResize (this);" onMouseUp = "MouseUpToResize (this);"> </span>
Salesman
</Td>
<Td class = "tit">
<Span class = "resizeDivClass" onMouseDown = "MouseDownToResize (this);" onMouseMove = "MouseMoveToResize (this);" onMouseUp = "MouseUpToResize (this);"> </span>
Payment Method
</Td>
</Tr>
<Tr>
<Td class = "num"> 1 </td>
<Td> China Telecom </td>
<Td> order customer name </td>
<Td> advertising department </td>
<Td> Wang Tianyi </td>
<Td> cash </td>
</Tr>
<Tr>
<Td class = "num"> 2 </td>
<Td> China Mobile </td>
<Td> order customer name </td>
<Td> marketing department </td>
<Td> Li Xiaohong </td>
<Td> credit card </td>
</Tr>
<Tr>
<Td class = "num"> 3 </td>
<Td> China Unicom </td>
<Td> order customer name </td>
<Td> marketing department </td>
<Td> Wang youzi </td>
<Td> bank card </td>
</Tr>
</Table>
<Script language = "javascript"> <! --
// Senfe ("table name", "odd row background", "even row background", "move the mouse over background", "click background ");
TheObjTable ("theObjTable", "# c0c0c0", "# fff", "# a3a2a2 ");
// --> </Script>
</Body>
</Html>
