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

Posted 2023-05-08

【中文标题】启用了 Scroller 且 Bootstrap5 样式的 JQuery Datatable 导致意外的垂直滚动条

【英文标题】：JQuery Datatable with Scroller enabled and Bootstrap5 styling is causing unexpected vertical scrollbar

【发布时间】：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 我注意到了同样的情况并应用了修复程序。感谢您关注这个问题。 没问题，祝你好运；）

【参考方案1】：

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

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

【讨论】：

我无法移除 scollY 和 scrollx。 ScrollY 将设置最大高度值。

【参考方案2】：

注意到在表头 tr 中添加了 2px。我可以通过删除表头 tr 中的 2px 高度来解决此问题。

固定在这里：https://jsfiddle.net/xwLb79h6/11/

CSS 变化：

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