Question

我有下面这样的表格，它是从asp.net用户控件呈现的。

是否可以在此表中添加水平滚动条，第一列和最后一列是固定的？有没有办法在不改变当前html结构的情况下完成这个？

<div class="someclass" id="overVw">
  <table id="overVwTbl">
     <thead>
       <tr class="abc">
         <th class="header">Displays</th>
         <th class="header">08/19</th>
         <th class="header">08/21</th>
         <th class="header">08/26</th>
         <th class="header">09/09</th>
         <th class="header">09/23</th>
         <th class="header">10/07</th>
         <th class="header"> Avg. grade </th>
       </tr>
   </thead>
<tbody>
    <tr class="sari">
        <td class="base">
            <span title="Display One">Display One</span>
        </td>
        <td class="val">1</td>
        <td class="val">10</td>
        <td class="val">51</td>
        <td class="val">81</td>
        <td class="val">11</td>
        <td class="val">12</td>
        <td class="abc">0.46</td>
     </tr>

    <tr class="odd">

        <td class="base">
            <span title="Display Two">Display two</span>
        </td>
        <td class="val">12</td>
        <td class="val">13</td>
        <td class="val">41</td>
        <td class="val">81</td>
        <td class="val">11</td>
        <td class="val">12</td>
        <td class="abc">1.38</td>
     </tr>

    <tr class="sari">
        <td class="base">
            <span title="Display Three">Display Three</span>                        
        </td>
        <td class="val">31</td>
        <td class="val">80</td>
        <td class="val">51</td>
        <td class="val">81</td>
        <td class="val">11</td>
        <td class="val">12</td>
        <td class="abc">0</td>
    </tr>

 </tbody>
 <tbody class="avoidSort"><tr class="xyx">

        <td class="base">
            <span title="Totals">All</span>

        </td>
        <td class="val">1</td>
        <td class="val">10</td>
        <td class="val">51</td>
        <td class="val">81</td>
        <td class="val">11</td>
        <td class="val">12</td>
        <td class="abc">

        </td>

    </tr>
  </tbody>
  </table>
 </div>

Answer 1

试试这个就像预期的那样工作

CSS：

<style>
.flexcroll{
 height: 124px;
text-align: center;
overflow-y: auto;
overflow-x: hidden;
width: 257px;
}
</style>

HTML `

<table class="head" id="table1" style="border-bottom-style: groove;border-bottom-width: thin;border-bottom-color: #FFC202;" >
                                            <tr class="brkDwnDivComposite-first brkDwnDivComposite-last brkDwnDivComposite-even">
         <th class="brkDwnDivComposite-first ascending header">Metric</th>
         <th class="header">08/19</th>
         <th class="header">08/21</th>
         <th class="header">08/26</th>
         <th class="header">09/09</th>
         <th class="header">09/23</th>
         <th class="header">10/07</th>
         <th class="brkDwnDivComposite-last header"> Avg. grade </th>
       </tr>
</table>
<div class="flexcroll">
<table style="width:260px;padding-left: 11px;">
<tr class="brkDwnDivComposite-first brkDwnDivComposite-even">
        <td class="brkDwnDivComposite-first metricName bgClr0">
            <span title="7 Day Email Follow-up">7 Day Email Follow-up</span>
        </td>
        <td class="val">1</td>
        <td class="val">10</td>
        <td class="val">51</td>
        <td class="val">81</td>
        <td class="val">11</td>
        <td class="val">12</td>
        <td class="brkDwnDivComposite-last avgGrade">0.46</td>
     </tr>

    <tr class="brkDwnDivComposite-odd">

        <td class="brkDwnDivComposite-first metricName bgClr1">
            <span title="7 Day Phone Follow-up">7 Day Phone Follow-up</span>
        </td>
        <td class="val">12</td>
        <td class="val">13</td>
        <td class="val">41</td>
        <td class="val">81</td>
        <td class="val">11</td>
        <td class="val">12</td>
        <td class="brkDwnDivComposite-last avgGrade">1.38</td>
     </tr>

    <tr class="brkDwnDivComposite-even">
        <td class="brkDwnDivComposite-first metricName bgClr2">
            <span title="Alternative Suggestions Count">Alternative Suggestions  Count</span>                        
        </td>

        <td class="val">31</td>
        <td class="val">80</td>
        <td class="val">51</td>
        <td class="val">81</td>
        <td class="val">11</td>
        <td class="val">12</td>
        <td class="brkDwnDivComposite-last avgGrade">0</td>
    </tr>
 </table>
</div>
<table>
<tbody class="avoidSort"><tr class="brkDwnDivComposite-last brkDwnDivComposite-even totTblData">
<td class="brkDwnDivComposite-first metricName">
<span title="Totals">Totals</span>
      </td>
        <td class="val">1</td>
        <td class="val">10</td>
        <td class="val">51</td>
        <td class="val">81</td>
        <td class="val">11</td>
        <td class="val">12</td>
        <td class="brkDwnDivComposite-last avgGrade">
       </td>
    </tr>
  </tbody>
</table>

jquery + asp.net中的滚动条

1 个答案: