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?

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.