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

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.

Related