6

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?

XyberICE
  • 525
  • 2
  • 7
  • 16
  • 1
    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: http://jsbin.com/bavogi/1/edit – Christina Sep 30 '14 at 16:34
  • @Christina Ok, say Bootstrap's CSS is loaded last. Doesn't the higher specificity of `table.FormGroupContainer` on: `
    ` allow the FormGroupContainer to override the Bootstrap table CSS?     – XyberICE Oct 01 '14 at 19:29
  • Yes, if that's all there is. Remember this is normalize.css which is part of Bootstrap but maintained separately. – Christina Oct 01 '14 at 19:43
  • @Christina 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). – XyberICE Oct 02 '14 at 15:35
  • BTW how do I mark your comment as a helpful answer? – XyberICE Oct 02 '14 at 15:49

1 Answers1

4

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.

XyberICE
  • 525
  • 2
  • 7
  • 16