Twitter-Bootstrap 3.3.1 - DataTables always horizontal scrollable - css

Question

I've just updated from Bootstrap 3.2.0 to Bootstrap 3.3.1. I'm also using the DataTables-Plugin and therefore, I'm using dataTables.bootstrap.css and dataTables.bootstrap.js, respectively.
With version 3.2.0 I didn't have any problems, so far. With version 3.3.1 all tables are slightly scrollable in the horizontal direction (see screenshot).
I've got the table within a <div class="table-responsive"> tag. So normally, the horizontal scrollbar should be displayed on smaller screens but not by default.
Any ideas?

Answer 1

This works for me
In Bootstrap v3.3.4 bootstrap.min.css .table-responsive {min-height: .01%; overflow-x: auto;}
is causing the problem
So instead of changing in bootstrap core css file (As it is not recommended)
I edit following lines of code in my custom css file to override bootstrap css
.table-responsive {
overflow-x: inherit;
}
This will solve the issue.

Answer 2

The tables produced by DataTables are configured to be responsive already. So you don't need to enclose them in a bootstrap "table-responsive" div.
Your code might look like this:
<div class="table-responsive">
<table class="table" id="myTable">
.... blah blah ...
</table>
</div>
Then later in javascript you make it a responsive DataTables table:
$('#myTable').DataTable({ responsive: true });
This is redundant and causes the extra scroll bar. Just remove the table-responsive div.

Answer 3

Any of the answers is working for me.
I could fix it adding a width="100% !important" to the table.
.table-responsive table{
width: 100% !important;
}

Answer 4

I do need the table responsive class for mobile web responsive. So, what I do is creating a CSS class with #media only like this:
#media only screen and (min-width: 968px) {
/* disable responsive in desktop */
.disable-in-desktop {
overflow-x: inherit;
}
}
Then I call the .disable-in-desktop next to table-responsive, so it looks like:
<div class="table-responsive disable-in-desktop">
Conclusion:
Now, the responsive class will only work on a mobile screen, because I disabled it on the desktop screen. So the horizontal scroll doesn't occur anymore.
Sorry for the bad English language.

Answer 5

I have yet to find a great answer for why this is occurring. It looks like, for me at least, DataTables is creating the table 1-3 pixels wider than the container. This is always yielding an active horizontal scroll bar. I didn't want to disable the ability to have a responsive table at other resolutions or even lock it into certain sizes, so here's my solution:
$('#dataTable').DataTable({
drawCallback: function(settings) {
// fix to remove unnecessary width
let $table = $(this);
let diff = $table.parent().width() - $table.width();
if (diff > 0 && diff < 3) {
$table.width($table.width() - 4);
}
}
});
Now every time the table is resized, it will make sure the table is 4 pixels smaller than the container it is in, but only if it is within 3 pixels of the parent container. This will still allow it to be responsive at smaller screen sizes, but resize the table a few pixels when it is barely oversized.

Answer 6

put this in your custom.css, the datatable auto generate .row is affecting the scroll bar when is autoflow-x..
#example_wrapper .row{
margin-right:0px;
margin-left:-15px;
}