141660 - border-collapsed tables missing lines

Status: RESOLVED FIXED

(Core :: Layout: Tables, defect, P3)

Description

[Russell O'Connor]

In some cases tables with style {border-collapse: collapse} dividing lines are
not rendered.

In the attachement there should be a horizontal border between lines 3 and 4
under the B.

Comment 1

[Russell O'Connor]

Attachment: illustration of missing border bug

Comment 2

[Boris Zbarsky [:bzbarsky]]

seeing this on Linux too.

Comment 3

[Amarendra Hanumanula]

 Confirmed this on WIN2K build ID: 2002050106 branch build.

Comment 4

[Will Holcomb]

*** Bug 161566 has been marked as a duplicate of this bug. ***

Comment 5

[Grant]

Attachment: another smaller table example

Comment 6

[Bernd]

*** Bug 182430 has been marked as a duplicate of this bug. ***

Comment 7

[Bernd]

Attachment: patch

Comment 8

[Bernd]

taking

Comment 9

[Bernd]

fixed together with bug 157047

Comment 10

[Stijn de Witt]

Please re-open.

I am seeing this issue now, in Firefox 16.01 and 16.02. No idea when it was re-introduced. I looked into this because of a ticket in my company's own bug tracker, concerning our web client application:

224792.00, Web2: 2: Blue theme: Borders not visible in firefox when no records are shown.

I found that when I disabled the rule 'border-collapse: collapse;' the borders suddenly re-appeared. Regression?

I don't have the time to create a minimal use case at the moment (deadline stress, sorry), but I will note some things here that may help you guys reproduce:

The table has these CSS declarations set that may be of importance:
  border-width: 0 1px 1px;
  table-layout: fixed;
  white-space: nowrap;
  letter-spacing: 0.03em;
  border-collapse: collapse;

The table row has these rules:
  text-align: left;
  font-weight: bold;
  letter-spacing: 0.03em;
  white-space: nowrap;

The table header cells have a width set explicitly inline in the HTML with style="width:80px;" (this is changed from Javascript to allow resizable table columns)

The table header cells have these CSS declarations applied to them:
  border-right: 1px solid #F8F8F8;
  color: #333333;
  height: 30px;
  padding: 0 3px;
  position: relative;
  vertical-align: middle;
  border-right: 1px solid #F8F8F8;

We are using this same table component with the same styles on it in many places in the app and mostly it works fine, but in some instances it fails and I have no idea what the difference is. Functionally, it fails when the table has no data and we show a row with a rowspan equal to the amount of columns saying 'Nothing found.' Why that rowspan would affect the headers I don't know, but I saw in some of the many bugs listed on this that it probably has impact. Also I just noticed we use a tfoot element for that row, but our normal tables (when there is data) don't usually have a tfoot.

I am using Firefox on Windows 7 but we test on many environments and I have not heard anything about this being environment specific.