CSS border:none fails to override HTML table border="1" in border-collapse:collapse mode

RESOLVED DUPLICATE of bug 43178

Status

()

Core
Layout: Tables
RESOLVED DUPLICATE of bug 43178
10 years ago
10 years ago

People

(Reporter: Jean-Francois Larvoire, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(URL)

(Reporter)

Description

10 years ago
User-Agent:       Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; SLCC1; .NET CLR 2.0.50727; .NET CLR 3.0.04506; .NET CLR 1.0.3705; .NET CLR 1.1.4322; InfoPath.2)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.8.1.20) Gecko/20081217 Firefox/2.0.0.20

The problem is that when an HTML table is defined with the attribute border="1",
AND when the CSS style sheet contains the rule:
  table {
    border-collapse: collapse;
  }
THEN CSS rules for overriding the HTML border size do not work. Ex: With:
  td {
    border-style: none;
  }
Mozilla incorrectly draws 1-pixel borders between cells in the table.

Other browsers (Internet Explorer, Opera, Chrome) work fine (They do not display any border between cells).

Note that this problem was reported several years ago on the Internet. See for example http://www.pauldwaite.co.uk/browserBugs/mozilla/table_border_collapse_border_attribute/
It was present in Netscape 7.0, and still is in the latest release of Firefox 2.0.
Still I can't find it in Bugzilla.


Reproducible: Always

Steps to Reproduce:
<html>
<head>
<style>
table {
  border-collapse: collapse;
  border: none;
}
td {
  border: none;
}
</style>
<head>
<body>
  <table border="1">
    <tr>
      <td>One</td>
      <td>Two</td>
    </tr>
    <tr>
      <td>Three</td>
      <td>Four</td>
    </tr>
  </table>
</body>
</html>

Actual Results:  
One  |Two
-----+----
Three|Four


Expected Results:  
One   Two
          
Three Four


Note that removing the border="1" attribute is not possible, because in my case the HTML is generated by an old program on which I have no control.
All I can do is to tweak the style sheet.

As a workaround, I tried to use the style border=hidden instead of border=none.
This does indeed make the incorrect borders disappear.
But this workaround is not acceptable, because it is incompatible with derived table classes that DO define borders around cells, lines, or the whole table.

Although this is not clearly documented in the documentation page https://developer.mozilla.org/en/CSS/border-style, the difference is:
border:none is a recessive gene. If the neighboring cell has width=1, border-collapse yields a 1-pixel border.
border:hidden is a dominant gene. If the neighboring cell has width=1, border-collapse yields no border.

Updated

10 years ago
Status: UNCONFIRMED → RESOLVED
Last Resolved: 10 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 43178
You need to log in before you can comment on or make changes to this bug.