gpt4 book ai didi

javascript - 在 Bootstrap 表上使用 slimscroll 的正确方法是什么?

转载 作者:行者123 更新时间:2023-12-03 03:49:54 26 4
gpt4 key购买 nike

我正在尝试在 HTML 表格上使用细长滚动,但我根本没有得到任何滚动。这是我尝试过的代码。:-

表格代码:-

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

最佳答案

您的脚本不起作用有两个原因:

  • 1) 您需要在“table”标签中添加以下属性:

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

这样:

<table class="table table-striped table-bordered text-center table-condensed" data-toggle="table" data-cache="false" data-height="299">
  • 2) 您的“thead”标签和所有后续“tr”标签中的列数必须相同。在您的示例中,我计算了表格第一行中的 3 列 - “Thead”标签 - 以及接下来的行中的 25 列 - 每个“tr”标签的“td”标签 -

Here is a working example with your data.

注意:我尝试了“colspan”属性,但它不适用于 Slimscroll 库。我必须在第一行添加更多“theads”标签

注意:以下 Javascript 脚本运行良好:

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

关于javascript - 在 Bootstrap 表上使用 slimscroll 的正确方法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45211302/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com