Table with border-collapse has border-segments missing "notches" or drawn at clearly-wrong locations, if there are multiple row-groups
Categories
(Core :: Layout: Tables, defect)
Tracking
()
People
(Reporter: andrew, Unassigned, NeedInfo)
Details
Attachments
(6 files, 1 obsolete file)
screenshot of testcase 2 in Firefox vs. Chrome vs. WebKit (gnome-web/epiphany)
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:130.0) Gecko/20100101 Firefox/130.0
Steps to reproduce:
I created an HTML file with the following contents and viewed it in Firefox v130.0.1:
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Border bug</title>
<style>
table {border-collapse:collapse;}
tr td {border:thick solid black;}
</style>
</head>
<body>
<table><thead><tr></tr></thead>
<tbody>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td> </td></tr>
<tr><td colspan="3">3</td><td colspan="2">2</td></tr>
<tr><td>f</td><td>g</td><td>h</td><td>i</td><td> </td></tr>
<tr><td>k</td><td>l</td><td>m</td><td>n</td><td> </td></tr>
<tr><td colspan="5"><hr></td></tr>
<tr><td>p</td><td>q</td><td>r</td><td>s</td><td> </td></tr>
</tbody></table>
</body></html>
Actual results:
The table showed notches in the border above rows with colspan greater than 1.
These notches were not present without the border-collapse:collapse CSS, nor were they present without the row in thead.
Expected results:
The cell borders should have been continuous across the table.
|
||
Comment 1•1 year ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::Layout: Tables' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.
|
||
Comment 2•1 year ago
|
||
Can repro this on a build from Jan2021, so not a new regression.
Chrome does not show these notches. I dont know what should be the expected behaviour here.
|
|
||
Comment 3•1 year ago
|
||
|
||
Comment 4•1 year ago
|
||
Poking at the testcase a bit, it looks like things are thrown off by the lack-of-a-border in the tr in the thead here.
Diagnostically at least: I can make the bug disappear if I do any of the following:
(A) remove the empty tr in the thead
(B) set a border of the same thickness on that tr (or on tr in general) to the cell thickness.
(C) briefly add/remove display:none to that tr element.
|
|
||
Comment 5•1 year ago
|
||
|
|
||
Comment 6•1 year ago
|
||
(er, reattaching testcase 2 with smaller margins to be able to see all at once a bit better.)
|
|
||
Comment 7•1 year ago
|
||
Chrome and Firefox are similar here (modulo this Firefox bug), whereas WebKit doesn't seem to handle the differently-sized border at all.
Firefox is pretty-obviously drawing the "a|b" border at the wrong length and/or position, depending on the delta between the thead>tr border-width vs. the td border-width.
|
|
||
Comment 8•1 year ago
|
||
(In reply to Daniel Holbert [:dholbert] from comment #4)
Diagnostically at least: I can make the bug disappear if I do any of the following:
[...]
(C) briefly add/removedisplay:noneto thattrelement.
Note: as shown in this screenshot, this display:none tweak (triggering an incremental relayout) fixes some of the issues, but not all of them. (The right half of this screenshot has the bottom-edge of the a|b border a bit more correct in some cases, but not in all cases.)
|
|
||
Updated•1 year ago
|
|
|
||
Updated•1 year ago
|
|
Reporter | |
Comment 9•1 year ago
|
||
In the light of the reference to "empty header row" in the new bug title, I'd like to clarify that the original page that drew this bug to my attention contained a non-empty header row with a border (albeit thin). See the attached screen shot. The header row was reduced to an empty one in the course of my search for a minimal example.
|
||
Updated•1 year ago
|
|
|
||
Comment 10•1 year ago
|
||
(In reply to Andrew Fisher from comment #9)
Created attachment 9427709 [details]
Screenshot showing real page that revealed the bugIn the light of the reference to "empty header row" in the new bug title, I'd like to clarify that the original page that drew this bug to my attention contained a non-empty header row with a border (albeit thin). See the attached screen shot. The header row was reduced to an empty one in the course of my search for a minimal example.
Thanks! In further testing, I can reproduce the "notch" issue with nonempty thead as well (and a similar issue with tbody).
For this version of the issue, it seems that it just requires there to be some rows in two different row-groups (thead + tbody, thead + tfoot, tbody + tfoot -- top half of this testcase). If all the rows are in the same row-group, then everything is fine (as shown in the bottom half of this testcase).
|
|
||
Updated•1 year ago
|
Description
•