jQuery Slimscroll to HTML table with fixed header

Question

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

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

Answer 2

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>