No Borders On Bootstrap Table (Example) - Coderwall

Last Updated: June 27, 2023 · 137.6K · george-silva No borders on bootstrap table #css #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 ;)

Related protips:

Change the Bootstrap NavBar Breakpoint

#css #bootstrap #table

Written by George Silva

Say Thanks Respond

Related protips

Fully custom select box, simple css only

570.8K 32

Change the Bootstrap NavBar Breakpoint

500.2K 39

Creating full width (100% ) container inside fixed width container.

465.4K 14

5 Responses Add your response

shadowfiend

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 · george-silva

Hello!

The !important is not so important after all.

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

over 1 year ago · getvivekv

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

over 1 year ago · seuros

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

over 1 year ago · rakan

hi just like my freind said The !important is not so important after all. why you think this all about important

over 1 year ago ·

Have a fresh tip? Share with Coderwall community!

Post Post a tip Best #Css Authors oldboy 570.6K #css #jQuery #CSS 3 iatek 502.8K #css #Javascript #Node.js praveenvijayan 464.3K #css #Javascript #Python elad2412 415.5K #css #cross browser compatibility #photoshop projectcleverweb 307.7K #css #javascript #Python Related Tags #css #bootstrap #table Sponsored by #native_company# #native_desc# #native_cta# Filed Under Accelerate Your Web Development Skills Awesome Job See All Jobs Post a job for only $299 Thanks to our sponsor Sponsored by #native_company# — Learn More #native_title# #native_desc# #native_cta#

Từ khóa » Html Td Borderless