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

[css2][css-tables] Do collapsed tracks also shrink the table wrapper box or only the table grid box? #11408

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

[css2][css-tables] Do collapsed tracks also shrink the table wrapper box or only the table grid box? #11408

Loirooriol opened this issue Dec 22, 2024 · 2 comments
Labels
Agenda+ CSS2 css-tables-3 Current Work

Comments

@Loirooriol
Copy link
Contributor

https://drafts.csswg.org/css2/#blockwidth
https://drafts.csswg.org/css2/#dynamic-effects

<!DOCTYPE html>
<div style="border: solid; width: 150px">
  <table style="width: 100px; height: 50px; border-spacing: 0; margin: auto; background: cyan">
    <col style="visibility: collapse"></col>
    <td></td>
    <td></td>
  </table>
</div>
Gecko Blink WebKit
  • Gecko resolves auto margins using width: 100px, so they become 25px each. Then the table ends up being only 50px, but the margins stay as 25px.
  • Blink resolves auto margins with the final width, so they become 50px each.
  • WebKit doesn't support visibility: collapse.

Blink seems better I guess.
@Loirooriol
Copy link
Contributor Author

What Gecko does is: it shrinks the table grid box, but not the table wrapper box. That's why margins are unaffected, or here the table doesn't fit next to the float:

<!DOCTYPE html>
<div style="border: solid; width: 150px">
  <div style="float: left; width: 75px; height: 50px; background: magenta"></div>
  <table style="width: 100px; height: 50px; border-spacing: 0; background: cyan">
    <col style="visibility: collapse"></col>
    <td></td>
    <td></td>
  </table>
</div>
Gecko Blink
imatge

That the table wrapper doesn't shrink can be observed with outline. And it's possible to align the table grid box to the right of the table wrapper box with direction: rtl:

<!DOCTYPE html>
<div style="border: 6px solid; width: 150px">
  <table style="width: 100px; height: 50px; border-spacing: 0; background: cyan; outline: solid magenta; direction: ltr;">
    <col style="visibility: collapse"></col>
    <td></td><td></td>
  </table>
  <table style="width: 100px; height: 50px; border-spacing: 0; background: cyan; outline: solid magenta; direction: rtl;">
    <col style="visibility: collapse"></col>
    <td></td><td></td>
  </table>
</div>
Gecko Blink

I think both can be reasonable, but since Gecko allows the wrapper to be bigger than the grid (it can also happen with a caption, but Blink & WebKit never allow it), it should be possible to customize the alignment with justify-items (it would apply to the table wrapper, and affect the table grid that would get the initial justify-self: auto

@Loirooriol Loirooriol changed the title [css2][css-tables] Should tables re-resolve their margins after shrinking due to visibility: collapse? [css2][css-tables] Do collapsed tracks also shrink the table wrapper box or only the table grid box? Dec 23, 2024
@Loirooriol
Copy link
Contributor Author

Though Gecko is inconsistent with the block axis, where the wrapper doesn't stay with the same size as before collapsing a row:

<!DOCTYPE html>
<div style="border: 6px solid; width: 150px">
  <table style="width: 100px; height: 100px; border-spacing: 0; background: cyan; outline: solid magenta">
    <col style="visibility: collapse"></col>
    <tr style="visibility: collapse"><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
  </table>
</div>
Gecko Blink

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Agenda+ CSS2 css-tables-3 Current Work
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@Loirooriol