Bootstrap 3: fat table header bottom border

The Bootstrap libary styles a lot of components pretty nicely. It also styles tables and since bootstrap 3 they made a change to the border of a header row. Some like it, but I don’t so let’s fix it!

The html for a default table is pretty straight forward and looks like this:

Bootstrap 3 table

Note the fat border of the table row. Now let’s write some CSS:

.table-light thead > tr > th {
    border-bottom: none;
}

And add this class to the table element:

<table class="table table-light">

That makes the table looks like this:

bs3_table_fixed

A demo is available on JSFiddle.

Leave a Reply

Your email address will not be published. Required fields are marked *