Override Bootstrap table border-collapse style

Question

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?

Knighton

Normalize.css (part of Bootstrap 3) adds the collapse. CSS load order always makes a difference. If the style is applied to the table it will work provided that it's after Bootstrap css and no other css is conflicting with it: jsbin.com/bavogi/1/edit – Shala

@Shala Ok, say Bootstrap's CSS is loaded last. Doesn't the higher specificity of table.FormGroupContainer on: <table class="FormGroupContainer"></table> allow the FormGroupContainer to override the Bootstrap table CSS? – Knighton

Yes, if that's all there is. Remember this is normalize.css which is part of Bootstrap but maintained separately. – Shala

@Shala I notice that the Bootstrap class has media=screen does this change the specificity? I'm using the compiled Bootstrap theme so I can't remove the Normalize.css (I have 2 monolithic Bootstrap bootstrap.min.css, bootstrap-theme.min.css files). – Knighton

BTW how do I mark your comment as a helpful answer? – Knighton

Answer 1

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.

Knighton