如何在滚动时冻结表格的前两个列

时间:2011-10-19 12:06:48

标签: jquery css

我在桌子里面有一个div。当div正在滚动时,表的前两列必须冻结(始终可见)。如何用jquery做到这一点。

这是我需要帮助的代码。

<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>

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:-1)

我发明了自己的方式,不需要Jquery或其他工具,只需简单的HTML和CSS 我实现同样的效果但非常基本,很快就会改进。 试试这个

* * 根据您的要求调整列宽。

      <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