可变列宽的表格

<!----> /*  表格  */
.ResizedColTable
{
    border-bottom : solid 2px #ACA899 ;
    border-left : solid 2px #ACA899 ;
    border-right : solid 2px #ACA899 ;
    border-top : solid 2px #ACA899 ;         
}

/*  标题行  */
.ResizedColTable .fieldTr
{
    background-color : #ECE9D8 ;
}

/*  每个标题所在的单元格  */
.ResizedColTable .fieldTd
{     
    border-top : solid 1px #fff ;
    border-bottom : solid 1px #C0C0C0 ;
    border-left : solid 1px #fff ;
    border-right : solid 1px #C0C0C0 ;
    padding : 0 0 0 0 ;
}

/*  每个标题所在的标签  */
.ResizedColTable .fieldTd .fieldNowrapDiv
{     
    cursor : default ;
    white-space : nowrap ;
    overflow : hidden ;
    text-overflow : ellipsis ;
    padding : 3px 0px 0px 3px ;
}

/*  列宽调整标签，侦听onmousedown事件的那个div */
.ResizedColTable .fieldTd .dragDiv
{
    cursor : e-resize ;
    width : 100% ;
    padding : 0 3px 0 0 ;
    display : block ;
}

/*  偶数行样式  */
.ResizedColTable .dataRow0
{
    background-color : #fafafa ;
}

/*  奇数行样式  */
.ResizedColTable .dataRow1
{
    background-color : #f0f0f0 ;
}

/*  被选中行的样式  */
.ResizedColTable .dataRowSelected
{
    background-color : #FFFFD8 ;
}

/*  数据单元格  */
.ResizedColTable .dataTd
{
    border-top : solid 1px #fff ;
    border-left : solid 1px #fff ;
    border-right : solid 1px #C0C0C0 ;
    border-bottom : solid 1px #C0C0C0 ;
    padding :  0 3px 0 0 ;
    height : 22px ;
}

/*  数据单元格里不允许换行的 Div  */
.ResizedColTable .dataTd .dataNowrapDiv
{
    white-space : nowrap ;
    overflow : hidden ;
    text-overflow : ellipsis ;
    padding : 3px 0px 0px 3px ;
}

<!----> /* **********************************
 * 可变列宽的表格 V1.0 2006-11-18
 * 样式风格:simple
 ********************************** */


/*  表格  */
.purpleTb
{
    border-bottom : solid 1px #666666 ;
    border-left : solid 1px #B5CAFF ;
    border-right : solid 1px #666666 ;
    border-top : solid 1px #B5CAFF ;         
}
.purpleTb
{
    font-size : 14px ;
}

/*  标题行  */
.purpleTb .fieldTr
{
    background-color : #ECE9D8 ;
    background-image : url(thbg.jpg) ;
}

/*  每个标题所在的单元格  */
.purpleTb .fieldTd
{     
    border-top : solid 2px #fff ;
    border-bottom : solid 1px #C0C0C0 ;
    border-left : solid 1px #fff ;
    border-right : solid 1px #666666 ;
    padding : 0 0 0 0 ;
}

/*  每个标题所在的标签  */
.purpleTb .fieldTd .fieldNowrapDiv
{     
    cursor : default ;
    white-space : nowrap ;
    overflow : hidden ;
    text-overflow : ellipsis ;
    padding : 3px 0px 0px 3px ;
}

/*  列宽调整标签，侦听onmousedown事件的那个Div  */
.purpleTb .fieldTd .dragDiv
{
    cursor : e-resize ;
    width : 100% ;
    padding : 0 3px 0 0 ;
    display : block ;
}

/*  偶数行样式  */
.purpleTb .dataRow0
{
    background-color : #fafafa ;
}

/*  奇数行样式  */
.purpleTb .dataRow1
{     
    background-color : #fff ;
}

/*  被选中行的样式  */
.purpleTb .dataRowSelected
{
    background-color : #FFFFD8 ;
}

/*  数据单元格  */
.purpleTb .dataTd
{
    border-top : solid 1px #fff ;
    border-left : solid 1px #fff ;
    border-right : solid 1px #B5CAFF ;
    border-bottom : solid 1px #B5CAFF ;
    padding :  0 3px 0 0 ;
    height : 22px ;
}

/*  数据单元格里不允许换行的 Div  */
.purpleTb .dataTd .dataNowrapDiv
{
    white-space : nowrap ;
    overflow : hidden ;
    text-overflow : ellipsis ;
    padding : 3px 0px 0px 3px ;
}

<!----> < html >
     < head >
         < title > 可变列宽的表格 </ title >
         < link  rel =stylesheet  href ="css/purple/style.css" >
         < link  rel =stylesheet  href ="css/simple/style.css" >
         < script  src ="js/ResizedColTable.js" ></ script >
     </ head >
     < body >

    可变列宽的表格
     < table  id =table1  cellpadding =0  cellspacing =0  border =0  class =purpleTb >
         < tr  class =fieldTr >
             < th  class =fieldTd  >< div  class =dragDiv  fixed =true >< div  title =""  style ='width:45;'  onmousedown ='event.cancelBubble=true;'  class =fieldNowrapDiv > 操作 </ div ></ div ></ th >
             < th  class =fieldTd  >< div  class =dragDiv  fixed =false >< div  title =""  style ='width:52;'  onmousedown ='event.cancelBubble=true;'  class =fieldNowrapDiv > 姓名 </ div ></ div ></ th >
             < th  class =fieldTd  >< div  class =dragDiv  fixed =false >< div  title =""  style ='width:52;'  onmousedown ='event.cancelBubble=true;'  class =fieldNowrapDiv > 性别 </ div ></ div ></ th >
             < th  class =fieldTd  >< div  class =dragDiv  fixed =false >< div  title =""  style ='width:52;'  onmousedown ='event.cancelBubble=true;'  class =fieldNowrapDiv > 年龄 </ div ></ div ></ th >

             < th  class =fieldTd  >< div  class =dragDiv  fixed =false >< div  title =""  style ='width:52;'  onmousedown ='event.cancelBubble=true;'  class =fieldNowrapDiv > 电话 </ div ></ div ></ th >
             < th  class =fieldTd  >< div  class =dragDiv  fixed =false >< div  title =""  style ='width:150;'  onmousedown ='event.cancelBubble=true;'  class =fieldNowrapDiv > email </ div ></ div ></ th >
         < th  width =100% ></ th ></ tr >
        
         < tr >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv >< input  type ="button"  value ="删除" ></ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 张三 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 男 </ div ></ td >

             < td  class =dataTd >< div  style ='text-align:right;'  title =""  class =dataNowrapDiv > 22 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 1234566789 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > [email protected] </ div ></ td >
         < td  width =100% ></ td ></ tr >
        
         < tr >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv >< input  type ="button"  value ="删除" ></ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 张三 </ div ></ td >

             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 男 </ div ></ td >
             < td  class =dataTd >< div  style ='text-align:right;'  title =""  class =dataNowrapDiv > 22 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 1234566789 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > [email protected] </ div ></ td >
         < td  width =100% ></ td ></ tr >
        
         < tr >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv >< input  type ="button"  value ="删除" ></ div ></ td >

             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 张三 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 男 </ div ></ td >
             < td  class =dataTd >< div  style ='text-align:right;'  title =""  class =dataNowrapDiv > 22 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 1234566789 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > [email protected] </ div ></ td >
         < td  width =100% ></ td ></ tr >

        
         < tr >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv >< input  type ="button"  value ="删除" ></ div ></ td >
             <</