table-header-group stretchs vertically in Firefox (like table-row-groups) but not in Chromium
Categories
(Core :: Layout: Tables, defect, P3)
Tracking
()
People
(Reporter: sohaib.najar, Unassigned)
References
Details
Attachments
(3 files)
The chrome table head taking just its content height.
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:127.0) Gecko/20100101 Firefox/127.0
Steps to reproduce:
create a table in html.
<div style="height: 90vh">
<div style="position: relative; width: 100%; height: 100%">
<table style="display: table; height: 100%">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</tbody>
</table>
</div>
</div>
Actual results:
When I open it in Firefox the header take half the table but when I open it on Google Chrome or any other browser the header take just the height of its content.
Expected results:
The header should take just the content height not half the available space. like other browsers.
|
Reporter | |
Comment 1•4 months ago
|
||
the current code
<body>
<div style="height: 90vh">
<div style="position: relative; width: 100%; height: 100%">
<table style="height: 100%">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody style="background-color: gray">
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
|
||
Comment 2•4 months 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 3•3 months ago
|
||
The severity field is not set for this bug.
:jwatt, could you have a look please?
For more information, please visit BugBot documentation.
|
||
Comment 4•3 months ago
|
||
|
|
||
Comment 5•3 months ago
|
||
If I change <thead> to use display: table-row-group, then Chromium matches our behavior.
I don't see anything in https://drafts.csswg.org/css-tables/ that implies that table-header-group should layout any differently from table-row-group (other than the order). Ian am I missing something? Is this just a WebKit inherited quirk or do you know if Chromium's behavior is intentional here?
|
||
Comment 6•3 months ago
|
||
Our logic here is:
DistributeTableBlockSizeToSections
https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/layout/table/table_layout_utils.cc;l=1946-1951;drc=4cc063ac39c4a0d1f6011421b259a9715bb16de1;bpv=1;bpt=1
And was intentional from when we rewrote this code (I think we received bugs when we didn't have this logic). Basically people expect that we grow the body groups over the header/footer groups for cases like this.
The logic is (roughly)
- There is only one valid header/footer.
- When growing the sections prefer the body sections over the header/footer sections.
|
|
||
Comment 7•3 months ago
|
||
Ok, sounds reasonable, thanks!
It'd be great to get a link to those bugs if you can find them, but if not I guess its ok. I filed https://github.com/w3c/csswg-drafts/issues/10590 to consider putting this into the tables spec.
Description
•