How to add borders to a Responsive Table in Bootstrap 3

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.

I also see this issue by chance. It is very interesting that I found:

inside a media query screen and (max-width: 767px), which means on a narrow-screen device, or inside a panel,

.table-responsive > .table-bordered are set to have no borders in Bootstrap3. I don't know any reason for Bootstrap intentionally doing this.

That part of Bootstrap3 source code looks like:

@media screen and (max-width: 767px) {
...
  .table-responsive > .table-bordered {
    border: 0;
  }
...
}

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

Update: I kind of know the reason why Bootstrap is doing that. For narrow screen, <div class="table-responsive"> has a border itself. Also, if a bordered table is a direct child of <div class="panel">, the panel would act like a border of that table. So Bootstrap intentionally removed the outer border of your table inside these divs.

You are not missing anything in your code. You are just not using it the way Bootstrap recommends.