I am researching my way to use slimscroll plugin to apply to html table, which is getting filled with the business data from a web service. However as the title depicts, slimscroll scroll the entire div and header of table too. I am trying to achieve fixed header with tbody scrolling.

<div class="slimscrolldiv">
  <table>
    <thead></thead>
    <tbody></tbody>
    <tr>
      <td></td>
    </tr>
    . . . . .
  </table>
</div>

I am not posting any code but above code snippet would suffice to understand the problem. If need any other information, please post a ment.

I am researching my way to use slimscroll plugin to apply to html table, which is getting filled with the business data from a web service. However as the title depicts, slimscroll scroll the entire div and header of table too. I am trying to achieve fixed header with tbody scrolling.

<div class="slimscrolldiv">
  <table>
    <thead></thead>
    <tbody></tbody>
    <tr>
      <td></td>
    </tr>
    . . . . .
  </table>
</div>

I am not posting any code but above code snippet would suffice to understand the problem. If need any other information, please post a ment.

• javascript
• jquery
• slimscroll

Share Improve this question Follow edited Jan 5, 2017 at 10:58 Hakan Fıstık 19.6k1616 gold badges124124 silver badges150150 bronze badges asked Nov 1, 2013 at 9:22 Akki619Akki619 2,42266 gold badges2929 silver badges5858 bronze badges 1

• now whole table got slim scroll property?? – user2663434 Commented Nov 1, 2013 at 9:27

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

One thing that worked for me (at least partially) was to create 2 tables, one for thead and one for tbody and to wrap the slimscroll around the tbody table.

The reason this works 'partially' is because you then have to play around with css to get the 2 table columns to line up.

Update: demo

this is alternate way :

<div class="slimscrolldiv">
   <table>
      <thead></thead>
      <tbody id="scrollMe">
        <tr>
           <td></td>
        </tr>
      </tbody>
   </table>
</div>

script

<script>
  $(function(){
    $('#scrollMe').slimScroll({
      height: '250px'
      });
  });
</script>