启用了 Scroller 且 Bootstrap5 样式的 JQuery Datatable 导致意外的垂直滚动条答案

【问题标题】：JQuery Datatable with Scroller enabled and Bootstrap5 styling is causing unexpected vertical scrollbar启用了 Scroller 且 Bootstrap5 样式的 JQuery Datatable 导致意外的垂直滚动条
【发布时间】：2021-11-10 23:16:53
【问题描述】：

即使只有 2 条记录，我也会在 jquery 数据表中获得一个垂直滚动条。请参考下面的jsfiddle链接，

https://jsfiddle.net/xwLb79h6/7/

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

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>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,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,
});} );

当我删除表格边框类时，滚动条似乎消失了。但是，我需要表格边框类。

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

【问题讨论】：

签入开发者工具，这是因为 ...它在表格的顶部菜单和第一个 td 之间...但是为什么它会给出这样的行为...如果我删除它，表格宽度有问题......你必须找到解决方案:)
@Wordica 我注意到了同样的情况并应用了修复程序。感谢您关注这个问题。
没问题，祝你好运；）