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?

Solution

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.