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

Question

The DITA Open Toolkit automatically inflicts some inline table attributes when one publishes to HTML, including frame="border" and rules="all".

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

Obviously I can't edit the HTML, company policy is to not edit the XSLT, so how can I remove these gridlines using CSS alone?

I've tried various cunning combinations of border-xxxxxx styles and given them !important declarations to no effect.

Thanks, Andrew

Answer 1

Hi Ajoten,

Maybe using FireBug Inspect Element can help you detect the CSS property and allow you to target it in Firefox (instructions here).

Can you post an example of the code?

Answer 2

Use jQuery's remove attribute on document load to remove the old attributes all together.

api.jquery.com/removeAttr

Answer 3

border-color seemes to apply.

Answer 4

Adding !important to each rule should override the HTML definition.

td { border-color: blue !important }

Answer 5

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

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

It's not ideal if you need to remove the border altogether, but I guess you could match the border-color to the page background?

Answer 6

Thanks everyone.

The 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>

The 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;}

So while it looks as I'd expect in IE, it doesn't in Firefox UNLESS I remove those frame/border/rules attributes in the HTML. Which I can't in production.