1. 首頁
  2. 問答
  3. 如何在滾動時凍結表格的前2列

如何在滾動時凍結表格的前2列

2011-10-19 108 views
0

我有一個表格裏面的div。當div滾動時，表格的前兩列必須凍結（始終可見）。如何用jQuery來做到這一點。如何在滾動時凍結表格的前2列

這裏是我需要幫助的代碼。

<div style="overflow: scroll; width: 1000px;"> 
<table border="2"> 
    <tr> 
     <td style="width: 200px; background-color:Aqua;"> 
      asd;alskd;laksd;lka 
     </td> 
     <td style="width: 200px; background-color:Aqua;"> 
      asd;alskd;laksd;lka 
     </td> 
     <td style="width: 200px"> 
      asd;alskd;laksd;lka 
     </td> 
     <td style="width: 200px"> 
      asd;alskd;laksd;lka 
     </td> 
     <td style="width: 200px"> 
      asd;alskd;laksd;lka 
     </td> 
     <td style="width: 200px"> 
      asd;alskd;laksd;lka 
     </td> 
     <td style="width: 200px"> 
      asd;alskd;laksd;lka 
     </td> 
     <td style="width: 200px"> 
      asd;alskd;laksd;lka 
     </td> 
     <td style="width: 200px"> 
      asd;alskd;laksd;lka 
     </td> 
     <td style="width: 200px"> 
      asd;alskd;laksd;lka 
     </td> 
     <td style="width: 200px"> 
      asd;alskd;laksd;lka 
     </td> 
     <td style="width: 200px"> 
      asd;alskd;laksd;lka 
     </td> 
     <td style="width: 200px"> 
      asd;alskd;laksd;lka 
     </td> 
    </tr>   
</table>

來源

2011-10-19 vijay

回答

0 
<td style="width: 200px; background-color:Aqua; position:fixed;"> 
    asd;alskd;laksd;lka 
</td> 
<td style="width: 200px; background-color:Aqua;position:fixed;"> 
    asd;alskd;laksd;lka 
</td>

來源

2011-10-19 12:17:22

+0

對準不正確 – vijay

+0

您可以添加'左：**像素;'或類似的東西？我不是你認識的代碼猴子;-) –

+0

不僅第二列對齊返回到第一列。 – vijay

-1

我發明了我自己的方式，無需jQuery的或其他工具，只是普通的HTML和CSS 我achive同樣的效果，但很基本的，很快就會改善。 請嘗試此操作

* *根據您的要求調整欄寬。

 <div id=main-table> 
     <table name=myTable1 cellspacing="0" cellpadding=0 border=1 width="100%" style="border-collapse: collapse"> 

       <thead> 
       <tr class="header"> 
       <th class="labels">&nbsp;</th> 
       <th valign=top width="23" class="labels">&nbsp;</th> 
       <th valign=top width="78" class="labels"> 
       Followup Date</th> 
       <th valign=top width="77" class="labels"> 
       First Name</th> 
       <th valign=top width="91" class="labels"> 
       Last Name</th> 
       <th valign=top width="126" class="labels"> 
       Email</th> 
       <th valign=top width="91" class="labels"> 
       Phone1</th> 
       <th valign=top width="91" class="labels"> 
       Phhne2</th> 
       <th valign=top width="90" class="labels"> 
       Industry</th> 
       <th valign="top" class="labels" width=89> 
       Company</th> 
       <th valign="top" class="labels" width=92>City</th> 
       <th valign="top" class="labels" width=42>State</th> 
       <th valign=top width="42" class="labels"> 
       Zip</th> 
       <th valign=top width="182" class="labels"> 
       Website</th> 
      </tr> 
       </thead> 
     </table> 
     <div id="table-contents"> 
     <table id="myTable1" name=myTable1 cellspacing="0" cellpadding=0 border=1 style="border-collapse: collapse"> 

      <tbody> 

      <tr> 
       <td valign=top width="20"> 
       <input type="checkbox" name="C1" value="ON"></td> 
       <td valign=top width="23"> 
       <input type="button" value="..." name="B3" style="font-size: 8pt;height:22px;width:19px"></td> 
       <td valign=top width="78" class="first_row"> 
       <input type="text" id="datepicker" size="8" name="txtdt" class="row-first"></td> 
       <td valign=top width="77" class="first_row"> 
       <input type="text" name="T1" size="8" class="row-first"></td> 
       <td valign=top width="91" class="first_row"> 
       <input type="text" name="T2" size="10" class="row-first"></td> 
       <td valign=top width="126" class="first_row"> 
       <input type="text" name="T3" size="15" class="row-first"></td> 
       <td valign=top width="91" class="first_row"><input type="text" name="T4" size="10" class="row-first"></td> 
       <td valign=top width="91" class="first_row"><input type="text" name="T5" size="10" class="row-first"></td> 
       <td valign=top width="90" class="first_row"> 
       <input type="text" name="autocompleteindustry" id="autocompleteindustry" size="10" class="row-first"></td> 
       <td width="89" class="first_row"><input type="text" name="T6" size="10" class="row-first"></td> 
       <td width="92" class="first_row"> 
       <input name=autocomplete id=autocomplete size="10" class="row-first" value="Atlanta"></td> 
       <td width="42" class="first_row"> 
       <input type="text" name="autocompletest" id="autocompletest" size="3" class="row-first" value="GA"></td> 
       <td valign=top width="42" class="first_row"> 
       <input type="text" name="T7" size="3" class="row-first"></td> 
       <td valign=top width="108" class="first_row"><input type="text" name="T8" size="20" class="row-first"></td> 
      </tr> 

       <tr> 
       <td valign=top width="20"> 
       <input type="checkbox" name="C1" value="ON"></td> 
       <td valign=top width="23"> 
       <input type="button" value="..." name="B4" style="font-size: 8pt;height:22px;width:19px"></td> 
       <td valign=top width="61"> 
       <input type="text" id="datepicker_GG" size="8" name="txtdt" class="row-first"></td> 
       <td valign=top width="61"> 
       <input type="text" name="T1" size="8" class="row-first"></td> 
       <td valign=top width="75"> 
       <input type="text" name="T2" size="10" class="row-first"></td> 
       <td valign=top width="110"> 
       <input type="text" name="T3" size="15" class="row-first"></td> 
       <td valign=top width="75"><input type="text" name="T4" size="10" class="row-first"></td> 
       <td valign=top width="75"><input type="text" name="T5" size="10" class="row-first"></td> 
       <td valign=top width="75"> 
       <input type="text" name="autocomplete_GGindustry_GG" id="autocomplete_GGindustry_GG" size="10" class="row-first"></td> 
       <td><input type="text" name="T6" size="10" class="row-first"></td> 
       <td> 
       <input name=autocomplete_GG id=autocomplete_GG size="10" class="row-first" value="Atlanta"></td> 
       <td> 
       <input type="text" name="autocomplete_GGst" id="autocomplete_GGst" size="3" class="row-first" value="GA"></td> 
       <td valign=top width="33"> 
       <input type="text" name="T7" size="3" class="row-first"></td> 
       <td valign=top width="108"><input type="text" name="T8" size="20" class="row-first"></td> 
      </tr> 

      <tr> 
       <td valign=top width="20"> 
       <input type="checkbox" name="C1" value="ON"></td> 
       <td valign=top width="23"> 
       <input type="button" value="..." name="B5" style="font-size: 8pt;height:22px;width:19px"></td> 
       <td valign=top width="61"> 
       <input type="text" id="datepicker_GG" size="8" name="txtdt" class="row-first"></td> 
       <td valign=top width="61"> 
       <input type="text" name="T1" size="8" class="row-first"></td> 
       <td valign=top width="75"> 
       <input type="text" name="T2" size="10" class="row-first"></td> 
       <td valign=top width="110"> 
       <input type="text" name="T3" size="15" class="row-first"></td> 
       <td valign=top width="75"><input type="text" name="T4" size="10" class="row-first"></td> 
       <td valign=top width="75"><input type="text" name="T5" size="10" class="row-first"></td> 
       <td valign=top width="75"> 
       <input type="text" name="autocomplete_GGindustry_GG" id="autocomplete_GGindustry_GG" size="10" class="row-first"></td> 
       <td><input type="text" name="T6" size="10" class="row-first"></td> 
       <td> 
       <input name=autocomplete_GG id=autocomplete_GG size="10" class="row-first" value="Atlanta"></td> 
       <td> 
       <input type="text" name="autocomplete_GGst" id="autocomplete_GGst" size="3" class="row-first" value="GA"></td> 
       <td valign=top width="33"> 
       <input type="text" name="T7" size="3" class="row-first"></td> 
       <td valign=top width="108"><input type="text" name="T8" size="20" class="row-first"></td> 
      </tr> 

      <tr> 
       <td valign=top width="20"> 
       <input type="checkbox" name="C1" value="ON"></td> 
       <td valign=top width="23"> 
       <input type="button" value="..." name="B6" style="font-size: 8pt;height:22px;width:19px"></td> 
       <td valign=top width="61"> 
       <input type="text" id="datepicker_GG" size="8" name="txtdt" class="row-first"></td> 
       <td valign=top width="61"> 
       <input type="text" name="T1" size="8" class="row-first"></td> 
       <td valign=top width="75"> 
       <input type="text" name="T2" size="10" class="row-first"></td> 
       <td valign=top width="110"> 
       <input type="text" name="T3" size="15" class="row-first"></td> 
       <td valign=top width="75"><input type="text" name="T4" size="10" class="row-first"></td> 
       <td valign=top width="75"><input type="text" name="T5" size="10" class="row-first"></td> 
       <td valign=top width="75"> 
       <input type="text" name="autocomplete_GGindustry_GG" id="autocomplete_GGindustry_GG" size="10" class="row-first"></td> 
       <td><input type="text" name="T6" size="10" class="row-first"></td> 
       <td> 
       <input name=autocomplete_GG id=autocomplete_GG size="10" class="row-first" value="Atlanta"></td> 
       <td> 
       <input type="text" name="autocomplete_GGst" id="autocomplete_GGst" size="3" class="row-first" value="GA"></td> 
       <td valign=top width="33"> 
       <input type="text" name="T7" size="3" class="row-first"></td> 
       <td valign=top width="108"><input type="text" name="T8" size="20" class="row-first"></td> 
      </tr> 

      <tr> 
       <td valign=top width="20"> 
       <input type="checkbox" name="C1" value="ON"></td> 
       <td valign=top width="23"> 
       <input type="button" value="..." name="B7" style="font-size: 8pt;height:22px;width:19px"></td> 
       <td valign=top width="61"> 
       <input type="text" id="datepicker_GG" size="8" name="txtdt" class="row-first"></td> 
       <td valign=top width="61"> 
       <input type="text" name="T1" size="8" class="row-first"></td> 
       <td valign=top width="75"> 
       <input type="text" name="T2" size="10" class="row-first"></td> 
       <td valign=top width="110"> 
       <input type="text" name="T3" size="15" class="row-first"></td> 
       <td valign=top width="75"><input type="text" name="T4" size="10" class="row-first"></td> 
       <td valign=top width="75"><input type="text" name="T5" size="10" class="row-first"></td> 
       <td valign=top width="75"> 
       <input type="text" name="autocomplete_GGindustry_GG" id="autocomplete_GGindustry_GG" size="10" class="row-first"></td> 
       <td><input type="text" name="T6" size="10" class="row-first"></td> 
       <td> 
       <input name=autocomplete_GG id=autocomplete_GG size="10" class="row-first" value="Atlanta"></td> 
       <td> 
       <input type="text" name="autocomplete_GGst" id="autocomplete_GGst" size="3" class="row-first" value="GA"></td> 
       <td valign=top width="33"> 
       <input type="text" name="T7" size="3" class="row-first"></td> 
       <td valign=top width="108"><input type="text" name="T8" size="20" class="row-first"></td> 
      </tr> 

      <tr> 
       <td valign=top width="20"> 
       <input type="checkbox" name="C1" value="ON"></td> 
       <td valign=top width="23"> 
       <input type="button" value="..." name="B8" style="font-size: 8pt;height:22px;width:19px"></td> 
       <td valign=top width="61"> 
       <input type="text" id="datepicker_GG" size="8" name="txtdt" class="row-first"></td> 
       <td valign=top width="61"> 
       <input type="text" name="T1" size="8" class="row-first"></td> 
       <td valign=top width="75"> 
       <input type="text" name="T2" size="10" class="row-first"></td> 
       <td valign=top width="110"> 
       <input type="text" name="T3" size="15" class="row-first"></td> 
       <td valign=top width="75"><input type="text" name="T4" size="10" class="row-first"></td> 
       <td valign=top width="75"><input type="text" name="T5" size="10" class="row-first"></td> 
       <td valign=top width="75"> 
       <input type="text" name="autocomplete_GGindustry_GG" id="autocomplete_GGindustry_GG" size="10" class="row-first"></td> 
       <td><input type="text" name="T6" size="10" class="row-first"></td> 
       <td> 
       <input name=autocomplete_GG id=autocomplete_GG size="10" class="row-first" value="Atlanta"></td> 
       <td> 
       <input type="text" name="autocomplete_GGst" id="autocomplete_GGst" size="3" class="row-first" value="GA"></td> 
       <td valign=top width="33"> 
       <input type="text" name="T7" size="3" class="row-first"></td> 
       <td valign=top width="108"><input type="text" name="T8" size="20" class="row-first"></td> 
      </tr> 

      <tr> 
       <td valign=top width="20"> 
       <input type="checkbox" name="C1" value="ON"></td> 
       <td valign=top width="23"> 
       <input type="button" value="..." name="B9" style="font-size: 8pt;height:22px;width:19px"></td> 
       <td valign=top width="61"> 
       <input type="text" id="datepicker_GG" size="8" name="txtdt" class="row-first"></td> 
       <td valign=top width="61"> 
       <input type="text" name="T1" size="8" class="row-first"></td> 
       <td valign=top width="75"> 
       <input type="text" name="T2" size="10" class="row-first"></td> 
       <td valign=top width="110"> 
       <input type="text" name="T3" size="15" class="row-first"></td> 
       <td valign=top width="75"><input type="text" name="T4" size="10" class="row-first"></td> 
       <td valign=top width="75"><input type="text" name="T5" size="10" class="row-first"></td> 
       <td valign=top width="75"> 
       <input type="text" name="autocomplete_GGindustry_GG" id="autocomplete_GGindustry_GG" size="10" class="row-first"></td> 
       <td><input type="text" name="T6" size="10" class="row-first"></td> 
       <td> 
       <input name=autocomplete_GG id=autocomplete_GG size="10" class="row-first" value="Atlanta"></td> 
       <td> 
       <input type="text" name="autocomplete_GGst" id="autocomplete_GGst" size="3" class="row-first" value="GA"></td> 
       <td valign=top width="33"> 
       <input type="text" name="T7" size="3" class="row-first"></td> 
       <td valign=top width="108"><input type="text" name="T8" size="20" class="row-first"></td> 
      </tr> 

      <tr> 
       <td valign=top width="20"> 
       <input type="checkbox" name="C1" value="ON"></td> 
       <td valign=top width="23"> 
       <input type="button" value="..." name="B10" style="font-size: 8pt;height:22px;width:19px"></td> 
       <td valign=top width="61"> 
       <input type="text" id="datepicker_GG" size="8" name="txtdt" class="row-first"></td> 
       <td valign=top width="61"> 
       <input type="text" name="T1" size="8" class="row-first"></td> 
       <td valign=top width="75"> 
       <input type="text" name="T2" size="10" class="row-first"></td> 
       <td valign=top width="110"> 
       <input type="text" name="T3" size="15" class="row-first"></td> 
       <td valign=top width="75"><input type="text" name="T4" size="10" class="row-first"></td> 
       <td valign=top width="75"><input type="text" name="T5" size="10" class="row-first"></td> 
       <td valign=top width="75"> 
       <input type="text" name="autocomplete_GGindustry_GG" id="autocomplete_GGindustry_GG" size="10" class="row-first"></td> 
       <td><input type="text" name="T6" size="10" class="row-first"></td> 
       <td> 
       <input name=autocomplete_GG id=autocomplete_GG size="10" class="row-first" value="Atlanta"></td> 
       <td> 
       <input type="text" name="autocomplete_GGst_GG" id="autocomplete_GGst_GG" size="3" class="row-first" value="GA"></td> 
       <td valign=top width="33"> 
       <input type="text" name="T7" size="3" class="row-first"></td> 
       <td valign=top width="108"><input type="text" name="T8" size="20" class="row-first"></td> 
      </tr> 

      <tr> 
       <td valign=top width="20"> 
       <input type="checkbox" name="C1" value="ON"></td> 
       <td valign=top width="23"> 
       <input type="button" value="..." name="B11" style="font-size: 8pt;height:22px;width:19px"></td> 
       <td valign=top width="61"> 
       <input type="text" id="datepicker_GG" size="8" name="txtdt" class="row-first"></td> 
       <td valign=top width="61"> 
       <input type="text" name="T1" size="8" class="row-first"></td> 
       <td valign=top width="75"> 
       <input type="text" name="T2" size="10" class="row-first"></td> 
       <td valign=top width="110"> 
       <input type="text" name="T3" size="15" class="row-first"></td> 
       <td valign=top width="75"><input type="text" name="T4" size="10" class="row-first"></td> 
       <td valign=top width="75"><input type="text" name="T5" size="10" class="row-first"></td> 
       <td valign=top width="75"> 
       <input type="text" name="autocomplete_GGindustry_GG" id="autocomplete_GGindustry_GG" size="10" class="row-first"></td> 
       <td><input type="text" name="T6" size="10" class="row-first"></td> 
       <td> 
       <input name=autocomplete_GG id=autocomplete_GG size="10" class="row-first" value="Atlanta"></td> 
       <td> 
       <input type="text" name="autocomplete_GGst_GG" id="autocomplete_GGst_GG" size="3" class="row-first" value="GA"></td> 
       <td valign=top width="33"> 
       <input type="text" name="T7" size="3" class="row-first"></td> 
       <td valign=top width="108"><input type="text" name="T8" size="20" class="row-first"></td> 
      </tr> 
      <tr> 
       <td valign=top width="20"> 
       &nbsp;</td> 
       <td valign=top width="23"> 
       &nbsp;</td> 
       <td valign=top width="61"> 
       &nbsp;</td> 
       <td valign=top width="61"> 
       &nbsp;</td> 
       <td valign=top width="75"> 
       &nbsp;</td> 
       <td valign=top width="110"> 
       &nbsp;</td> 
       <td valign=top width="75"> 
       &nbsp;</td> 
       <td valign=top width="75"> 
       &nbsp;</td> 
       <td valign=top width="75"> 
       &nbsp;</td> 
       <td> 
       &nbsp;</td> 
       <td> 
       &nbsp;</td> 
       <td> 
       &nbsp;</td> 
       <td valign=top width="33"> 
       &nbsp;</td> 
       <td valign=top width="108"> 
       &nbsp;</td> 
      </tr> 
       </tbody> 
     </table> 
      </div> 
      </div> 

<style> 
input.row-first{ 
font-family:verdana;height:22px;background:#ffff11;border:0px;padding:0;margin:0; 
} 
.labels{ 
font-family:arial;font-size:12px;font- weight:bold;color:#ffffff;background:#d344dd;height:30px; 
} 
#main-table{ 
width: 1150px; 
} 
#table-contents{ 
overflow: scroll; height:400px; width:1150px; 
} 

</style>

不久將增加它http://www.eddmpostcardprinting.com

來源

2012-06-24 05:44:14

相關問題

 相關問題