Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[css-sizing][css-align][css-tables] Stretch sizing vs special table sizing. Who wins? #11404

Open
Loirooriol opened this issue Dec 22, 2024 · 0 comments
Open

[css-sizing][css-align][css-tables] Stretch sizing vs special table sizing. Who wins? #11404

Loirooriol opened this issue Dec 22, 2024 · 0 comments
Labels
css-align-3 Current Work css-sizing-4 css-tables-3 Current Work

Comments

@Loirooriol
Copy link
Contributor

Loirooriol commented Dec 22, 2024 •
edited
Loading

https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing
https://drafts.csswg.org/css-align/#valdef-justify-self-stretch
https://drafts.csswg.org/css2/#dynamic-effects

<!DOCTYPE html>
<style>.abspos { width: 100px; position: absolute; top: 0; bottom: 0; border: dashed #aaa }</style>
<div style="position: relative; height: 100px; width: 200px; border: solid">
  <table class="abspos" style="left: 0; align-self: stretch">
    <tr style="visibility: collapse"><td></td></tr>
    <tr style="background: cyan"><td></td></tr>
  </table>
  <table class="abspos" style="left: 100px; height: -moz-available; height: -webkit-fill-available; height: stretch">
    <tr style="visibility: collapse"><td></td></tr>
    <tr style="background: magenta"><td></td></tr>
  </table>
</div>
Blink Gecko WebKit
  • Blink stretches abspos tables with align-self: stretch, others don't. See [css-align] normal self-alignment for abspos tables should behave as start #11285.
  • With an explicit height: stretch, Blink and Gecko use it as an input for table layout, so each row becomes 44px so that the sum including gutters and borders is 100px. But then one row is collapsed, so this shrinks the outer height of the table to 54px. So the alignment container isn't filled.
  • WebKit doesn't support visibility: collapse (it's just treated as hidden).

Blink seems most reasonable to me.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css-align-3 Current Work css-sizing-4 css-tables-3 Current Work
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@Loirooriol