1690021 - Table weirdness

Status: RESOLVED INVALID

(Core :: Layout: Tables, defect)

Description

[Walter Tuvell]

Attachment: Screenshot of bug

User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.99 Safari/537.36

Steps to reproduce:

Visited the web page (on my website) https://readingma.us/GovtZone/SelectBoard/Main/MeetingMatters,2020

Actual results:

See attached screenshot. Notice the weird tails on the right-hand side. I've seen that before on Firefox, and they disappeared when I resized the page (Ctrl-±, Ctrl-0), but this time that hack doesn't work, they're persistent.

Expected results:

Those tails shouldn't be there. They aren't there on Chrome, Falkon, Vivaldi. (I use Linux, Fedora.)

Comment 1

[Walter Tuvell]

Attachment: Table markup

Here's the markup for that table. I

Comment 2

[Walter Tuvell]

Here's the markup for that table. I'm using Drupal, Bootstrap, plus my own CSS tweaks, none of which should be a problem (as I said, other browser work OK, as you can check).

Comment 3

[Andre Klapper]

Interesting - disabling border-collapse: collapse; removes the problem in Firefox, but the underlying question is why to the right of the table there is additional space in the box, which e.g. Chromium does not display.

Comment 4

[Emilio Cobos Álvarez [:emilio]]

There seem to be some empty, trailing <col> elements which are adding space. It seems chrome is not using the <colgroup> at all. If you remove it Firefox ends up with the same layout.

Comment 5

[Walter Tuvell]

Confirmed, that Emilio's fix does indeed solve my problem, as you can see by visiting that page (so the problem was mine, thanks!).

The further issue, as to why Firefox is different from (some) other browsers I leave to you. Have fun.

Cheers!

Comment 6

[Emilio Cobos Álvarez [:emilio]]

This is likely to be a Chromium bug, tbf, though probably worth digging but I don't have the time right now.

Comment 7

[Mats Palmgren (inactive)]

Attachment: Simplified testcase

Comment 8

[Mats Palmgren (inactive)]

The HTML spec:
https://html.spec.whatwg.org/multipage/tables.html#table-processing-model
makes it clear the table in "Simplified testcase" should have 4 columns.

The CSS2 spec says:
https://www.w3.org/TR/CSS22/tables.html#table-layers

A "missing cell" is a cell in the row/column grid that is not occupied by an element or pseudo-element. Missing cells are rendered as if an anonymous table-cell box occupied their position in the grid.

The CSS3 Table Module draft confirms and clarifies that:
https://drafts.csswg.org/css-tables-3/#missing-cells-fixup

Once the amount of columns in a table is known, any table-row box must be modified such that it owns enough cells to fill all the columns of the table, when taking spans into account. New table-cell anonymous boxes must be appended to its rows content until this condition is met.

So this looks like a bug in Chrome to me. I filed:
https://bugs.chromium.org/p/chromium/issues/detail?id=1173766