Last Updated: January 20, 2018
· george-silva

No borders on bootstrap table

I needed a borderless table, while using a bootstrap table.

Bootstrap by default keeps only row borders, to distiguish one row from the other. I wanted to remove those.

You can just add this to your css:

.table-borderless td,
.table-borderless th {
    border: 0;

and use a bootstrap table just the way you would, adding the table-borderless class to the table:

<table class="table table-borderless table-condensed table-hover">

And voilá, borderless tables:


Note: you need to place your css file after the bootstrap css ;)

4 Responses
Add your response


Hm… Why do you need the !important? The bootstrap selector seems to be .table th, .table td. If you include your stylesheet after bootstrap, you should be able to just use your code without the need for !important. If you include it before, you should still be able to just apply a more specific selector, e.g. table.table-borderless th, table.table-borderless td or .table.table-borderless th, .table.table-borderless td and again avoid the !important.

I only bring this up because !important can sometimes lead to confusion later when cascading should be working properly but isn't because a stray !important is overriding all styles. Nice tip!

over 1 year ago ·


The !important is not so important after all.

I'll update the tip :D. Thanks for contributing!

over 1 year ago ·

It didn't work with me without !important. So I guess !important is important

over 1 year ago ·

@getvivekv You have to add this style after you load bootstrap.

over 1 year ago ·