Why isn't the border working in this Bootstrap 3 table?

Question

With the base Bootstrap 3 CSS it seems to work fine, but with the Superhero Bootswatch theme it seems that border just doesn't want to appear. Any idea why?

http://jsfiddle.net/VxR7z/

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

Should work on all themes.

Answer 1

Just add this code with your desired color at border

.table-bordered th, .table-bordered td { border: 1px solid #ddd!important }

Thanks

Answer 2

Several of the bootswatch themes that I've seen set @table-border-color to transparent to completely remove horizontal borders i.e.

@table-border-color: rgba(221, 221, 221,0)

Unfortunately this does "break" the table-bordered table. Without customizing the core bootstrap less files, I think the easiest way to do this is to override with your own css as suggested, i.e.

.table-bordered th, .table-bordered td { border: 1px solid #ddd!important } 

Answer 3

I solved this issue by just adding !import :

table.table-bordered {
    border: 1px solid black !important;
    margin-top: 20px;
}
table.table-bordered > thead > tr > th {
    border: 1px solid black !important;
}
table.table-bordered > tbody > tr > td {
    border: 1px solid black !important;
}