How to add borders to a Responsive Table in Bootstrap 3

Question

I'm having trouble with adding borders to a responsive table using bootstrap.

<div class="panel">
    <div class="table-responsive text-center">

    <table class="table table-bordered">
        <thead> ... </thead>
        <tbody> ... </tbody>
    </table>

    </div>
</div>

The bordered table works only if I remove the "table-responsive" class.

What is my code missing so it works with this class as well class?

Answer 1

Seems like your panel class has one CSS property

.panel>.table-bordered, .panel>.table-responsive>.table-bordered {border:0;}

and that makes your table's outer border invisible. You can explicitly provide

border: 1px solid #ddd !important; if necessary.

<div class="panel">
    <div class="table-bordered table-responsive text-center">

    <table class="table table-bordered" style="border: 1px solid #ddd !important;">
        <thead> ... </thead>
        <tbody> ... </tbody>
    </table>

    </div>
</div>

Or you can remove the panel class and use something else. That might also work. You can always look to inspect element to see what classes and what CSS property any element is using.

Still, you won't get the border. Also, make sure that the table's border color and background color are not the same.