I have a table surrounded by table-responsive class, e.g.
<div class="table-responsive">
<table id="usersTable" class="table table-striped table-bordered table-hover" data-page-length='10'>
....
This produces an unnecessary scroll bar at the bottom of the page.
If I hard code the data (DOM sourced) and remove the DataTable initialization (in this case, by removing the ID), the scroll bar goes away, e.g.:
<table class="table table-striped table-bordered table-hover" data-page-length='10'>
<thead>
<tr>
<th>User Name</th>
<th>First Name</th>
<th>Last Name</th>
<th>Enabled</th>
<th>Job Title</th>
<th>Email</th>
<th>Phone #</th>
<th>Admin</th>
<th></th>
</tr>
</thead>
<tbody>
<tr role="row" class="even">
<td>user name</td>
<td>First</td>
<td>Last</td>
<td>Yes</td>
<td></td>
<td>email@emaila</td>
<td></td>
<td>No</td>
<td>Edit</td>
</tr>
</tbody>
</table>
When DataTables renders the table, it add:
<div id="usersTable_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
<div class="row">
class="row" adds a left and right margin. If in the debugger, I remove the right margin, the scroll bar goes away, but the page is slightly incorrectly formatted.
Note: I was using Bootstrap 3.2.x and everything worked fine. I recently upgraded to 3.3.5 and that's when things broke.
I am importing Datatables with:
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/bs/dt-1.10.8,fh-3.0.0,kt-2.0.0,r-1.0.7,sc-1.3.0/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/r/bs/dt-1.10.8,fh-3.0.0,kt-2.0.0,r-1.0.7,sc-1.3.0/datatables.min.js"></script>
And Bootstrap with:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">