Obtengo una barra de desplazamiento vertical en la tabla de datos jquery incluso para solo 2 registros. Consulte el enlace jsfiddle a continuación,

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

Estoy usando bootstrap 5 y la última versión de jquery datatable.

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, });} );

Cuando eliminé la clase con borde de tabla, parece que la barra de desplazamiento desaparece. Sin embargo, necesito la clase con borde de tabla.

Me pregunto por qué aparece la barra de desplazamiento vertical solo para 2 registros y cómo evitarlo. Cualquier sugerencia será muy apreciada.