gwg gwg - 4 months ago 23
CSS Question

DataTables with Bootstrap's table-responsive always has small x-overflow

I am using DataTables and Bootstrap but always seeing a tiny bit of x-overflow on my tables, no matter how many or few columns I have. Screenshot:

enter image description here

My markup:

<div class="table-responsive">
<table class="table data-table">
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
</div>


I don't apply any styles to the
data-table
class and the
table
and
table-responsive
classes are both Bootstrap's.

My initialization code:

$('.data-table').DataTable();


How can I eliminate this unnecessary x-scroll? I want it only to be used when the screen is much smaller and the columns obviously do not fit.

Answer

SOLUTION

You need to use a container. Wrap your markup in a div with class container or container-fluid.

<div class="container-fluid">
    <div class="table-responsive">
        <table class="table data-table">
            <thead>
                ...
            </thead>
            <tbody>
                ...
            </tbody>
        </table>
    </div>
</div>

Also add the following CSS rule:

.table-responsive {
   overflow-x: inherit;
}

DEMO

See this jsFiddle for code and demonstration.

Comments