Open Bug 1727594 Opened 3 years ago Updated 6 months ago

Borders disappearing on THs with position-sticky

Categories

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

Firefox 91
defect

Tracking

()

UNCONFIRMED

People

(Reporter: mbroos, Unassigned)

Details

Attachments

(1 file)

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.159 Safari/537.36

Steps to reproduce:

Used position:sticky; on the THs of a two-row THEAD in a table with collapsed borders. Attached sample HTML has four tables. First is without any position:sticky, and is fine. Second version makes the first row of THs sticky. Third version makes both rows of THs sticky. Fourth version uses rowspan and colspan on the THs.

Actual results:

All borders between the THs disappeared completely. Borders on the perimeter remained but were half-size. When scrolling, the borders of the TDs that disappear under the THs bleed through the perimeter borders of the THs. See the second and third tables in the attached sample.

Another problem appears when scrolling the fourth table. The second row of THs scroll up over the colspanned TH but the rowspanned TH on the left stays put.

Expected results:

  1. Using position:sticky should not make the TH borders disappear or shrink
  2. Content being scrolled underneath the sticky THs should not bleed through the (remaining) borders of those THs
  3. The entire THEAD block should be sticky, retaining its layout while the TBODY scrolls underneath it. I can work around this specific problem by giving the second row of THs a "top" attribute that is greater than zero, to prevent them from scrolling over the first row of THs. That is not a general solution, given that the contents of the THs affect their size when rendered.
Component: Untriaged → Layout: Tables
Product: Firefox → Core

I think it makes sense they disappear if you use border-collapsed tables? Where should the border be otherwise?

S3, this might be better raised at https://github.com/w3c/csswg-drafts/issues/new, but I'm not sure about what the best way to define this should be. With border-collapsing, the borders are computed for the entire table as a whole.

Severity: -- → S3
Priority: -- → P1

In what way does it "make sense they disappear"? In the first table of the sample I provided, the interior borders render properly. Why do you think it makes sense that just adding "position: sticky" (as in the second table in the example) causes the borders to render differently? According to https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse, "border-collapse: collapse" means "Adjacent cells have shared borders (the collapsed-border table rendering model)"

You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: