Override Bootstrap table border-collapse style

css twitter-bootstrap google-chrome css-specificity border-spacing
XyberICE picture XyberICE · Sep 30, 2014 · Viewed 9.7k times · Source

Bootstrap has a table {border-collapse: collapse; border-spacing:0;} style. I want to override this so I've create a class and applied it to the table in question:

table.FormGroupContainer
{
    border-collapse: separate;
    border-spacing: 2px;
}

but still the borders remain collapsed. The Chrome element inspector shows the Bootstrap CSS has been overridden but only disabling the style in the inspector allows a border spacing. I have observed this in IE 11 and Firefox 31.0. Inline styles also appear to override (as shown in Chrome inspector) but have no effect until I disable the Bootstrap style.

CSS load order also seems to make no difference. What gives? Isn't the class higher specificity?

Answer

XyberICE picture XyberICE · Oct 16, 2014

Load order was an issue here. My stylesheet was being loaded before Bootstrap. I added greater specificity to the rule in my stylesheet that allowed it to compete with Bootstrap's table CSS. Thanks @Christina.

Related questions

Center a column using Twitter Bootstrap 3

How do I center a div of one column size within the container (12 columns) in Twitter Bootstrap 3? I want a div, with a class .centered to be centered within the container. I may use a row if there are multiple …

Read More
vertical-align with Bootstrap 3

I'm using Twitter Bootstrap 3, and I have problems when I want to align vertically two div, for example — JSFiddle link: The grid system in Bootstrap uses float: left, not display:inline-block, so the property vertical-align doesn't work. I tried using …

Read More
Text-align class for inside a table

Is there a set of classes in Twitter's Bootstrap framework that aligns text? For example, I have some tables with $ totals that I want aligned to the right... <th class="align-right">Total</th> and <td …

Read More