JQuery 启用了 Scroller 和 Bootstrap5 样式的数据表导致意外的垂直滚动条

Question

我在 jquery 数据 table 中得到一个垂直滚动条，即使只有 2 条记录。请参考下面的jsfiddle link，

我正在使用 bootstrap 5 和最新版本的 jquery 数据table。

HTML:

<table id="example" class="table table-sm table-bordered table-striped nowrap" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>0,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>0,750</td>
        </tr>
    </tbody>        
</table>

JavaScript:

$(document).ready(function() {
$('#example').DataTable({
    deferRender: true,
        scrollY: '25vh',
        scrollX: true,
        scroller: true,
        scrollCollapse: true,
        searching: false,
        paging: true,
});} );

当我删除 table 边框 class 时，滚动条似乎消失了。但是，我需要 table 边框 class.

我想知道为什么只有 2 条记录出现垂直滚动条以及如何避免它。任何建议将不胜感激。

Answer 1

删除 Java 脚本代码中的滚动 y 和 x 值而不是检查。

   ****scrollY: '25vh',
    scrollX: true,****

Answer 2

注意到在 table head tr 中添加了 2px。我可以通过删除 table head tr.

中的 2px 高度来解决这个问题

已修复：https://jsfiddle.net/xwLb79h6/11/

CSS 变化：

.table.dataTable > thead > tr{
  height:0 !important;
}

JQuery 启用了 Scroller 和 Bootstrap5 样式的数据表导致意外的垂直滚动条

JQuery Datatable with Scroller enabled and Bootstrap5 styling is causing unexpected vertical scrollbar

javascript

jquery

datatables

twitter-bootstrap