What is the correct way to use slimscroll on a bootstrap table?

Question

I am trying to use slim scroll on an HTML table but I am not getting any scrolling at all. Here are the codes that I tried.:-

The table code:-

<div class"container">
<div class="row">
<div class="col-md-8"> 
<div class="scrolltable"> 
<table class="table table-striped table-bordered text-center table-condensed"> <thead>
 <tr style="height: 83px;"> 
<th style="width: 249px; height: 83px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; STUDENT-ID</th> 
<th style="width: 34px; height: 83px;">&nbsp;S.NO</th>
 <th style="width: 198px; height: 83px;">&nbsp; &nbsp; &nbsp; &nbsp; STUDENT NAME</th>
</tr>
</thead>
     <tbody id="bodyer">

<tr style="height: 23px;">
    <td style="width: 249px; height: 23px;">15-14-065</td>
    <td style="width: 34px; height: 23px;">1</td>
    <td style="width: 198px; height: 23px;">Anisul Islam</td>
    <td style="width: 11px; height: 23px;">L</td>
    <td style="width: 11px; height: 23px;">U</td>
    <td style="width: 11px; height: 23px;">&nbsp;</td>
    <td style="width: 11px; height: 23px;">&nbsp;</td>
    <td style="width: 11px; height: 23px;">&nbsp;</td>
    <td style="width: 11px; height: 23px;">&nbsp;</td>
    <td style="width: 11px; height: 23px;">&nbsp;</td>
    <td style="width: 11px; height: 23px;">&nbsp;</td>
    <td style="width: 11px; height: 23px;">&nbsp;</td>
    <td style="width: 11px; height: 23px;">&nbsp;</td>
    <td style="width: 11px; height: 23px;">&nbsp;</td>
    <td style="width: 11px; height: 23px;">&nbsp;</td>
    <td style="width: 11px; height: 23px;">&nbsp;</td>
    <td style="width: 11px; height: 23px;">&nbsp;</td>
    <td style="width: 11px; height: 23px;">&nbsp;</td>
    <td style="width: 11px; height: 23px;">&nbsp;</td>
    <td style="width: 11px; height: 23px;">&nbsp;</td>
    <td style="width: 12px; height: 23px;">&nbsp;</td>
    <td style="width: 12px; height: 23px;">&nbsp;</td>
    <td style="width: 12px; height: 23px;">&nbsp;</td>
    <td style="width: 13px; height: 23px;">&nbsp;</td>
    <td style="width: 13px; height: 23px;">&nbsp;</td>
    </tr>

    <tr style="height: 23px;">
    <td style="width: 249px; height: 23px;">&nbsp;</td>
    <td style="width: 34px; height: 23px;">&nbsp;</td>
    <td style="width: 198px; height: 23px;">&nbsp;</td>
    <td style="width: 11px; height: 23px;">&nbsp;</td>
    <td style="width: 11px; height: 23px;">&nbsp;</td>
    <td style="width: 11px; height: 23px;">&nbsp;</td>
    <td style="width: 11px; height: 23px;">&nbsp;</td>
    <td style="width: 11px; height: 23px;">&nbsp;</td>
    <td style="width: 11px; height: 23px;">&nbsp;</td>
    <td style="width: 11px; height: 23px;">&nbsp;</td>
    <td style="width: 11px; height: 23px;">&nbsp;</td>
    <td style="width: 11px; height: 23px;">&nbsp;</td>
    <td style="width: 11px; height: 23px;">&nbsp;</td>
    <td style="width: 11px; height: 23px;">&nbsp;</td>
    <td style="width: 11px; height: 23px;">&nbsp;</td>
    <td style="width: 11px; height: 23px;">&nbsp;</td>
    <td style="width: 11px; height: 23px;">&nbsp;</td>
    <td style="width: 11px; height: 23px;">&nbsp;</td>
    <td style="width: 11px; height: 23px;">&nbsp;</td>
    <td style="width: 11px; height: 23px;">&nbsp;</td>
    <td style="width: 12px; height: 23px;">&nbsp;</td>
    <td style="width: 12px; height: 23px;">&nbsp;</td>
    <td style="width: 12px; height: 23px;">&nbsp;</td>
    <td style="width: 13px; height: 23px;">&nbsp;</td>

    <td style="width: 13px; height: 23px;">&nbsp;</td>
    </tr>
    <tr style="height: 23px;">
    <td style="width: 249px; height: 23px;">&nbsp;</td>
    <td style="width: 34px; height: 23px;">&nbsp;</td>
    <td style="width: 198px; height: 23px;">&nbsp;</td>
    <td style="width: 11px; height: 23px;">&nbsp;</td>
    <td style="width: 11px; height: 23px;">&nbsp;</td>
    <td style="width: 11px; height: 23px;">&nbsp;</td>
    <td style="width: 11px; height: 23px;">&nbsp;</td>
    <td style="width: 11px; height: 23px;">&nbsp;</td>
    <td style="width: 11px; height: 23px;">&nbsp;</td>
    <td style="width: 11px; height: 23px;">&nbsp;</td>
    <td style="width: 11px; height: 23px;">&nbsp;</td>
    <td style="width: 11px; height: 23px;">&nbsp;</td>
    <td style="width: 11px; height: 23px;">&nbsp;</td>
    <td style="width: 11px; height: 23px;">&nbsp;</td>
    <td style="width: 11px; height: 23px;">&nbsp;</td>
    <td style="width: 11px; height: 23px;">&nbsp;</td>
    <td style="width: 11px; height: 23px;">&nbsp;</td>
    <td style="width: 11px; height: 23px;">&nbsp;</td>
    <td style="width: 11px; height: 23px;">&nbsp;</td>
    <td style="width: 11px; height: 23px;">&nbsp;</td>
    <td style="width: 12px; height: 23px;">&nbsp;</td>
    <td style="width: 12px; height: 23px;">&nbsp;</td>
    <td style="width: 12px; height: 23px;">&nbsp;</td>
    <td style="width: 13px; height: 23px;">&nbsp;</td>
    <td style="width: 13px; height: 23px;">&nbsp;</td>
    </tr>
    </tbody>


    </table></div></div></div></div>

I read the answers from here :- Custom scrollbar for Bootstrap Table but this doesn't seem to help. here's the javascript , where I am trying to use slim scroll for the table:-

<script>
 $(function(){
    $('.scrolltable').slimScroll({
        height: '50px'
    });
});

 </script>

and I also tried this :-

<script>
 $(function(){
    $('#bodyer').slimScroll({
        height: '50px'
    });
});

 </script>

score 1 · Answer 1 · answered Jul 20 '17 at 12:43

Your script doesn't work for two reason :

1) You need to add the following properties in the "table" tag :

data-toggle="table" data-height="299"

in this way :

<table class="table table-striped table-bordered text-center table-condensed" data-toggle="table" data-cache="false" data-height="299">

2) You must have the same number of column in your "thead" tag and in all the following "tr" tag. In your example, I count 3 columns in the first row of your table - the "Thead" tags - and 25 columns in the following rows - the "td" tags of each "tr" tag -

Here is a working example with your data.

Note : I tried the "colspan" property but it didn't work with the Slimscroll library. I had to add more "theads" tags in the first row

Note : the following Javascript script works well :

$(document).ready(function () {
  $('.fixed-table-body').slimScroll({});
});

What is the correct way to use slimscroll on a bootstrap table?

1 Answers1