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:
Note: you need to place your css file after the bootstrap css ;)
Related protips:
Written by George Silva
Related protips
5 Responses
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!
Hello!
The !important is not so important after all.
I'll update the tip :D. Thanks for contributing!
It didn't work with me without !important. So I guess !important is important
@getvivekv You have to add this style after you load bootstrap.
hi
just like my freind said
The !important is not so important after all.
why you think this all about important
Have a fresh tip? Share with Coderwall community!
