I'm trying to add Twitter's Bootstrap navigation bar (and possibly other components in the future) to an existing project. Bootstrap has some CSS that it applies directly to table elements, which breaks the default behavior for the tables.
table {
border-spacing: 0;
border-collapse: collapse;
}
I've added my own CSS that loads after Bootstrap's CSS and overrides the properties.
table{
border-spacing:initial;
/*border-spacing:0;*/
border-collapse:initial;
/*border-collapse:separate;*/
}
I verified that my CSS rules are the ones being applied using Chrome's inspector. The problem is that, if I set the value to "initial", "inherit", or the default value (as defined by W3Schools Border Spacing and Border Collapse pages), it doesn't revert to the default behavior. Instead of seeing the "borders" around the table cells, the spacing seems completely gone. One thing I've noticed is that webkit has different default values associated with "border-spacing". "-webkit-border-horizontal-spacing" and "-webkit-border-vertical-spacing" seem to default to 1px, but using those values has also not helped me out much. It gets me the borders back, but the table seems to lose its cellPadding/cellSpacing attributes.
I've found that disabling all "border-spacing" rules applied to table elements brings back the behavior I want, but setting default values does not.
You can see the problem using the following JSFiddle pages:
Default behavior without BootStrap
After adding Bootstrap and overriding the CSS rules
To pre-empt the simple claims that this is related to or a duplicate of existing questions...
This one was a load order issue, and I'm pretty sure I have confirmed that is not the problem, though I'd be open to suggestions on how to be absolutely certain. I also tried increasing specificity of my CSS rule, but since my rule is the one already being applied, that doesn't fix anything.
The only solution I can see right now is to modify my local copy of Bootstrap CSS to remove that rule, but I was hoping for a solution that would explain why the default values don't have default behavior after they've been changed. That would prevent me from having to deviate from the library and reapply the fix any time Bootstrap releases an update.
