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.

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.

Banford · Answer 1 · 2010-05-24T14:53:14.940

2

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

api.jquery.com/removeAttr

edited May 24 '10 at 14:53

answered May 24 '10 at 14:38

Banford

2,539
4
23
35

score 2 · Answer 2 · answered May 24 '10 at 15:16

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?

reisio · Answer 3 · 2012-02-13T21:54:59.033

1

border-color seems to apply.

edited Feb 13 '12 at 21:54

answered May 24 '10 at 14:42

reisio

3,242
1
23
17

Please give an example of it working in Firefox. This doesn't in FF10 - http://jsfiddle.net/ajcw/GYYHb/ – ajcw Feb 14 '12 at 08:35
1

So `border-color` works in Firefox when applied to the table cells, but not the table itself. – ajcw Feb 14 '12 at 20:49
1

So it would seem, arguably because the rules were not actually applied to the table, but its cells. – reisio Feb 14 '12 at 22:24

score 0 · Answer 4 · answered May 24 '10 at 14:34

0

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?

answered May 24 '10 at 14:34

Xavi Esteve

1,114
2
19
35

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

4 Answers4