Twitter-bootstrap table how to get only the outer border lines and not in between rows

0

Issue

I have

<table class="table table-condensed">

I used to have table-bordered in there but it is giving me the lines in between rows. I just want the top, bottom, left and right lines on the outside of the entire table and no lines in between rows.

Also, I tried to do baby steps first and therefore tried to remove the lines in between rows as suggested here
Remove row lines in twitter bootstrap
and the solution given

table td {
    border-top: none;
}

didn’t work for me

Solution

I believe your CSS isn’t getting picked up because it isn’t specific enough. the css that defines the border in the twitter bootstrap code is:

.table th, .table td { /*css*/ }

but your code is

table td { /* css */}

the first is considered more specific because it uses the class “.table” instead of the table element as the selector and thus has higher priority.

Made a small jsfiddle to do what you want http://jsfiddle.net/hajpoj/EfUAa/11/

.table td, .table th {
    border: none;
}

table.table.table-condensed {
    border: 1px solid black;
}

Here’s a good resource on css specificity:

http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Also make sure that your css file is loaded after the bootstrap file.

Answered By – hajpoj

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More