无法覆盖“边框折叠”的 CSS 值，IE7 开发人员工具似乎具有误导性

Question

The web-page I'm authoring has a TABLE in it. The TABLE's border-collapse property is being set by a 3rd party CSS file that I import to be 'collapse'.

When I open the page in IE7, I notice that the table doesn't look right (the borders of the cells are visible as white lines).

Using IE's Developer Tool, I can enable/disable the 'border-collapse:collapse' attribute of the CSS I'm including using the check-box next to it in the Developer Tool's UI.

When I unchecked the box, the TABLE looks right again (no borders visible). So, I thought that if I put an inline style on the table element, setting the property value to 'separate' that would override the CSS file's value and the table would look right.

When I add the inline style to the TABLE however, it doesn't affect it's appearance. In the Developer Tool, I see that now the 'border-collapse:collapse' attribute of the CSS has 'strikethrough' style ie: it looks to be ;crossed out', but it seems like it is still being applied, because if I uncheck/check the box next to it, it still toggles the visibility of the cell borders.

My questions are: shouldn't the inline-style value be overriding the CSS-imported value for this attribute? Why does the attribute from the CSS appear crossed-out in the Developer Tool but is apparently not disabled? Is there some other way I can prevent the CSS value from being applied to border-collapse for this table?

Thanks,

NB: I also tried adding '!important' after 'separate'

Answer 1

Yes, an in-line style specification would override (have a higher specificity) than a style coming from an imported stylesheet. But that could be overridden by a JS-applied style.