Question

我正在尝试在HTML表格上使用slim scroll，但我根本没有得到任何滚动。以下是我尝试过的代码： -

表格代码： -

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

我从这里读了答案： - Custom scrollbar for Bootstrap Table 但这似乎没有帮助。这是javascript，我正在尝试使用超薄滚动表： -

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

 </script>

我也试过这个： -

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

 </script>

Answer 1

您的脚本无法正常工作：

1）您需要在＆＃34;表格中添加以下属性＆＃34;标签：

数据肘节=＆＃34;表＆＃34;数据高度=＆＃34; 299＆＃34;

以这种方式：

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

2）您的＆＃34; thead＆＃34;中必须包含相同数量的列。标签以及以下所有＆＃34; tr＆＃34;标签。在您的示例中，我在表格的第一行中计算了3列 - ＆＃34; Thead＆＃34;标签 - 以下行中的25列 - ＆＃34; td＆＃34;每个＆＃34; tr＆＃34;的标签标签 -

Here is a working example with your data.

注意：我试过＆＃34; colspan＆＃34;属性，但它没有与Slimscroll库一起使用。我不得不添加更多＆＃34; theads＆＃34;第一行中的标签

注意：以下Javascript脚本效果很好：

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

在bootstrap表上使用slimscroll的正确方法是什么？

1 个答案: