Note that there are some explanatory texts on larger screens.

plurals
  1. POHow can I override an HTML "rules" attribute using CSS?
    primarykey
    data
    text
    <p>The DITA Open Toolkit automatically inflicts some inline table attributes when one publishes to HTML, including frame="border" and rules="all".</p> <p>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.</p> <p>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?</p> <p>I've tried various cunning combinations of border-xxxxxx styles and given them !important declarations to no effect.</p> <p>The HTML says...</p> <pre><code>&lt;table cellpadding="4" cellspacing="0" frame="border" border="1" rules="all"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th class="cellrowborder"&gt;Type &lt;/th&gt; &lt;th class="cellrowborder"&gt;Comment &lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td class="cellrowborder"&gt;Caution &lt;/td&gt; &lt;td class="cellrowborder"&gt;Think twice. &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="cellrowborder"&gt;Attention &lt;/td&gt; &lt;td class="cellrowborder"&gt;Be careful. &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="cellrowborder"&gt;Danger &lt;/td&gt; &lt;td class="cellrowborder" &gt;Be scared. Be very scared. &lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; </code></pre> <p>The CSS says</p> <pre><code>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;} </code></pre> <p>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. </p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload