hfurca
Last Updated: February 25, 2016
·
34.65K
· george-silva
D2fb9816cd30b20916b3e98a73346de1

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">
</table>

And voilá, borderless tables:

Picture

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

4 Responses
Add your response

1401
36b4b730bc6d058fd0737fc44119ed6f

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 ·
1402
D2fb9816cd30b20916b3e98a73346de1

Hello!

The !important is not so important after all.

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

over 1 year ago ·
15948
2736520b671d62959a145daf52dcdb79

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

over 1 year ago ·
21917
Steven wilson pen and ink by ergasterd d4syzje

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

over 1 year ago ·