How can I override the HTML "rules" attribute using CSS?

Question

The DITA Open Toolkit automatically uses some of the built-in table attributes when publishing to HTML, including frame = "border" and rules = "all".

I need to override this "rules" attribute using CSS styles for the cells, and while I can get the desired result in IE and Chrome, Firefox puts solid black grid lines in the table and refuses to budge on this.

Obviously, I can’t edit HTML, the company’s policy is not to edit XSLT, so how can I remove these grid lines using only CSS?

I tried various ingenious combinations of border-xxxxxx styles and gave them important announcements without any effects.

HTML says ...

<table cellpadding="4" cellspacing="0" frame="border" border="1" rules="all"> <thead> <tr> <th class="cellrowborder">Type </th> <th class="cellrowborder">Comment </th> </tr> </thead> <tbody> <tr> <td class="cellrowborder">Caution </td> <td class="cellrowborder">Think twice. </td> </tr> <tr> <td class="cellrowborder">Attention </td> <td class="cellrowborder">Be careful. </td> </tr> <tr> <td class="cellrowborder">Danger </td> <td class="cellrowborder" >Be scared. Be very scared. </td> </tr> </tbody> </table> 

CSS says

 table {border: 1px solid black; font-family: Arial, Helvetica, sans-serif; border-collapse: collapse; font-size: 9pt; margin-top: 1em; margin-bottom: 1em; padding: 4px;} tr {border: none;} .cellrowborder {border: none;} 

This way, although it looks like I expected in IE, it does not work in Firefox. I DO NOT remove these frame / border / rules attributes in HTML. Which I can’t in production.

Answer 1

Use jQuery remove attribute when loading a document to remove old attributes together.

api.jquery.com/removeAttr

Answer 2

I had a quick game with <table frame="border" rules="all"> . The key seems to be to override it with a different border, for example:

 table { border: none; border-collapse: collapse; } td { border: 1px solid silver; } 

This is not ideal if you need to completely remove the border, but I think you could match the border-color to the background of the page?

Answer 3

border-color seems to apply.

Answer 4

Perhaps using the FireBug Inspect Element may help you define a CSS property and let you customize it in Firefox ( instructions here ).

Can you post some sample code?