scroll bar in jquery + asp.net

Question

I have table like this below that is rendered from a asp.net user control.

Is it possible to to add horizontal scroll bar to this table with first column and last column as fixed? Is there a way to accomplish this without changing the current html structure??

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

Not in a table I don't think. If it was a div you could of used overflow:scroll but I've just tried to apply this to a table and it doesn't work. http://jsfiddle.net/FJpc8/ — Liam, Dec 04 '13 at 11:38
@Jai, [perfectly valid](http://stackoverflow.com/questions/3076708/can-we-have-multiple-tbody-in-same-table) — Liam, Dec 04 '13 at 11:46

Praveen S · Answer 1 · 2013-12-05T05:07:21.170

Try this it will works as like u expected

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>

@Liam,@mmssaann replace brkDwnDivComposite with 'overVw' and tryit — Praveen S, Dec 04 '13 at 11:53
Possibly even worse http://jsfiddle.net/FJpc8/2/. Seriously, I'm not your jsFiddle b*tch. Do it yourself next time. — Liam, Dec 04 '13 at 11:56

scroll bar in jquery + asp.net

1 Answers1