滑动门技术,如何在div中滑动指定列

参照:
<html>   
  <head>   
  <meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312">   
  <title>1111</title>   
  <style>   
    
  .relativeTag   
  {   
         position:relative;     
  };     .fixCol   
  {   
  background-color:#cccccc;   
  position:relative;     
  left:expression(this.parentElement.offsetParent.scrollLeft);     
  };     
    
  .mainDiv     
  {     
        overflow:auto;     
  }   
  </style>   
  </head>   
    
    <body>   
      <div   class="mainDiv"   style="width:200px;height:150px;">   
            <table     width="100%"   border=1   cellspacing=0     >   
                <TR   class="relativeTag"   >   
                    <TD   class="fixCol"   width="100"   nowrap>Header   A</TD>   
                    <TD   width="100"   nowrap>Header   B</TD>   
                    <TD   width="100"   nowrap>Header   C</TD>   
                </TR>   
                <TR   class="relativeTag"   >   
                    <TD   class="fixCol"   >A</TD>   
                    <TD>B</TD>   
                    <TD>C</TD>   
                </TR>   
            </table>   
      </div>   
    </body>   
  </html>   

解决方案 »

  1.   


    你这代码看了太头痛了 改了你看一下：
    <html> 
    <head>   <style>  
        
      .relativeTag  
      {  
            position:relative;    
      };    .fixCol  
      {  
      background-color:#ffffff;  
      position:relative;    
      left:expression(this.parentElement.offsetParent.scrollLeft);    
      };    
        
      .mainDiv    
      {    
            overflow:auto;    
      }  
      </style></head> 
    <body> <div  class="mainDiv"  style="width:600px;height:122px;">  
    <TABLE id="Table1" height="90%" cellSpacing="1" cellPadding="1" width="100%" border="0"> 
    <TR  class="ChildTableRow"  vAlign="top"> 
    <TD bgcolor=#ffffff  > <table class="ChildTable" cellspacing="0" rules="all" border="1" id="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1" style="width:100%;border-collapse:collapse;"> 
    <TR  class="relativeTag"  > 
    <td class="fixCol" class="ChildTableHeader" align="center" style="width:6%;">编号 </td> 
    <td class="fixCol" class="ChildNormalTitle" align="center" style="width:6%;">编码 </td>
    <td class="fixCol" class="ChildRequiredTitle" align="center" style="width:20%;">物资名称 </td> 
    <td class="fixCol" class="ChildNormalTitle" align="center" style="width:6%;">单位 </td>
    <td class="ChildNormalTitle" align="center" style="width:10%;">计划单价 </td>
    <td class="ChildNormalTitle" align="center" style="width:6%;">计划数量 </td> 
    <td class="ChildNormalTitle" align="center" style="width:6%;">计划总价 </td> 
    <td class="ChildNormalTitle" align="center" style="width:6%;">一季度数量 </td> 
    <td class="ChildNormalTitle" align="center" style="width:6%;">二季度数量 </td> 
    <td class="ChildNormalTitle" align="center" style="width:6%;">三季度数量 </td> 
    <td class="ChildNormalTitle" align="center" style="width:6%;">四季度数量 </td>
    <td class="ChildNormalTitle" align="center" style="width:12%;">基地 </td> 
    <td class="ChildTableHeader" align="center" style="width:10%;">承办人 </td> 
    </tr> 
    <tr  class="relativeTag"   class="ChildTableRow"> 
    <td style="width:6%;" class="fixCol" >
    <table id="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1__ctl2_ref_ChangeStatus_Table1" cellspacing="0" cellpadding="0" width="100%"> 
    <TR  class="relativeTag"  > 
    <TD class="fixCol"> 
    <input name="TabControl1:tabPage2:ChildEdit_MaterialList:DataGrid1:_ctl2:ref_ChangeStatus:txtRefID" type="text" id="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1__ctl2_ref_ChangeStatus_txtRefID" style="width:0px;display:none" /> 
    <input name="TabControl1:tabPage2:ChildEdit_MaterialList:DataGrid1:_ctl2:ref_ChangeStatus:txtRefName" type="text" size="6" id="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1__ctl2_ref_ChangeStatus_txtRefName" class="SingleLineTextBox" style="width:99%;" /> </TD> 
    <td id="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1__ctl2_ref_ChangeStatus_selectTD" width="15" align="right"> 
    </td> 
    </tr> 
    </table> 
    </td> <td align="left" style="width:6%;" class="fixCol">1 </td> 
    <td style="width:6%;" class="fixCol" > 
    <input name="TabControl1:tabPage2:ChildEdit_MaterialList:DataGrid1:_ctl2:txt_Code" type="text" value="6001" size="6" id="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1__ctl2_txt_Code" class="NoBorderTextBox" /> </td> 
    <td style="width:20%;"  class="fixCol" > <span controltovalidate="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1__ctl2_txt_MaterialDescription" errormessage="The item can't be null" display="Dynamic" id="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1__ctl2_rfv_txt_MaterialDescription" evaluationfunction="RequiredFieldValidatorEvaluateIsValid" initialvalue="" style="color:Red;width:100%;display:none;">The item can't be null </span> <input name="TabControl1:tabPage2:ChildEdit_MaterialList:DataGrid1:_ctl2:txt_MaterialDescription" type="text" value="rree" size="20" id="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1__ctl2_txt_MaterialDescription" class="NoBorderTextBox" /> </td> 
    <td style="width:6%;"> <input name="TabControl1:tabPage2:ChildEdit_MaterialList:DataGrid1:_ctl2:txt_UOM" type="text" value="re" size="6" id="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1__ctl2_txt_UOM" class="NoBorderTextBox" /> </td> 
    <td style="width:10%;"> <input name="TabControl1:tabPage2:ChildEdit_MaterialList:DataGrid1:_ctl2:txt_PlanCost" type="text" maxlength="20" size="10" id="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1__ctl2_txt_PlanCost" class="NoBorderTextBox" style="ime-mode:disabled;" /> </td>
    <td style="width:6%;"> <input name="TabControl1:tabPage2:ChildEdit_MaterialList:DataGrid1:_ctl2:txt_PlanQuantity" type="text" maxlength="20" size="6" id="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1__ctl2_txt_PlanQuantity" class="NoBorderTextBox" style="ime-mode:disabled;" /> </td>
    <td style="width:6%;"> <input name="TabControl1:tabPage2:ChildEdit_MaterialList:DataGrid1:_ctl2:txt_PurchaseSum" type="text" maxlength="20" size="6" id="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1__ctl2_txt_PurchaseSum" class="NoBorderTextBox"  style="ime-mode:disabled;" /> </td>
    <td style="width:6%;"> <input name="TabControl1:tabPage2:ChildEdit_MaterialList:DataGrid1:_ctl2:txt_FirstQuarterQuantity" type="text" maxlength="20" size="6" id="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1__ctl2_txt_FirstQuarterQuantity" class="NoBorderTextBox" style="ime-mode:disabled;" /> </td> 
    <td style="width:6%;"> <input name="TabControl1:tabPage2:ChildEdit_MaterialList:DataGrid1:_ctl2:txt_SecondQuarterQuantity" type="text" maxlength="20" size="6" id="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1__ctl2_txt_SecondQuarterQuantity" class="NoBorderTextBox" style="ime-mode:disabled;" /> </td>
    <td style="width:6%;"> <input name="TabControl1:tabPage2:ChildEdit_MaterialList:DataGrid1:_ctl2:txt_ThirdQuarterQuantity" type="text" maxlength="20" size="6" id="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1__ctl2_txt_ThirdQuarterQuantity" class="NoBorderTextBox" style="ime-mode:disabled;" /> </td>
    <td style="width:6%;"> <input name="TabControl1:tabPage2:ChildEdit_MaterialList:DataGrid1:_ctl2:txt_FourthQuarterQuantity" type="text" maxlength="20" size="6" id="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1__ctl2_txt_FourthQuarterQuantity" class="NoBorderTextBox" style="ime-mode:disabled;" /> </td>
    <td style="width:12%;"> <select name="TabControl1:tabPage2:ChildEdit_MaterialList:DataGrid1:_ctl2:cbo_Warehouse" id="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1__ctl2_cbo_Warehouse" KEY="0" style="border-style:Solid;"> 
    <option selected="selected" value="1"> </option> 
    <option value="2">aaa </option> 
    <option value="3">bbb </option> 
    <option value="4">ccc </option> </select> </td> <td align="left" style="width:10%;">213 </td> 
    </tr> 
    </table> 
    </div>
    </body> 
    </html> 
      

  2.   

    另外我不是要在html上改,而是要用javascript改,因为数据可能有多行
      

  3.   

    这样行不?
    document.getElementById("表格id").class = "css class id"
      

  4.   

    http://www.namipan.com/d/d0e6cf238f259f8d08c434d52a900f9cf488e778fb31da04
    滑动技术视频教程