[css-tables-3] Max-width On Table Cells · Issue #2802 - GitHub

Skip to content Dismiss alert {{ message }} w3c / csswg-drafts Public

• Notifications You must be signed in to change notification settings
• Fork 678
• Star 4.5k

• Code
• Issues 3.5k
• Pull requests 95
• Actions
• Projects 8
• Security
• Insights

Additional navigation options

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-tables-3] max-width on table cells #2802 Open fantasai opened this issue Jun 21, 2018 · 9 comments Open [css-tables-3] max-width on table cells #2802 fantasai opened this issue Jun 21, 2018 · 9 comments Assignees Labels css-tables-3 Current Work

Comments

Copy link Collaborator

fantasai commented Jun 21, 2018

In #1643 (comment) @davidsgrogan wrote: table-cells aren't allowed to ever overflow, even if you try to explicitly size them This isn't the first time I've read this, but there appears to be a simple counterexample. Could you take a moment to explain the apparent contradiction, for my own edification (or possibly for yours)? <table style="border: 1px solid blue;"> <td style="max-width: 20px;">Overflow</td> </table> https://jsfiddle.net/dgrogan/9uduq99L/5/ I haven't looked into this in detail, so I might be missing something, but results of the test appear to contradict the css-tables-3 spec where it says The outer max-content width of a table-cell in a constrained column is max(min-width, width, min-content width, min(max-width, width)) adjusted by the cell intrinsic offsets. so filing this issue for further investigation by the css-tables-3 editors~

All reactions fantasai added the css-tables-3 Current Work label Jun 21, 2018 Copy link Member

dbaron commented Jun 26, 2018

I think what's happening here is that the contents of the cell overflow the cell, which is fine. However, it doesn't violate the principle that the cells are always the same block-size/inline-size as their row/column, and the rows/columns (modulo border-spacing) cover the entire table and don't overlap.

All reactions FremyCompany self-assigned this Jun 26, 2018 Copy link Contributor

FremyCompany commented Jun 26, 2018

Yes, I don't disagree that this is what is meant, but I think @fantasai is right, and currently the spec doesn't cap the max width by 'max-width' correctly, not sure where that math got inherited from but it doesn't appear to be accurate. https://jsfiddle.net/9uduq99L/15/ shows that the math should have the min-content-width be in the clamp with max-width as a cap, and width should be clamped too instead of min-ed because max-width isn't used as a minimum value, just as a maximum for the other values. I think the statements were orginating from the time where max-width didn't exist because width isn't allowed to make the cell smaller than its minimum width, it looks like the max-width thing is very likely to be a bug that stuck. I'll update the spec accordingly.

All reactions Copy link Member

davidsgrogan commented Aug 21, 2018 • edited Loading

I have also not looked into this too deeply, but the cell in the example from the first post isn't constrained according to the definition, which doesn't consider non-auto max-width to be constraining: A column is constrained if its corresponding table-column-group (if any), its corresponding table-column (if any), or any of the cells spanning only that column has a computed width that is not "auto", and is not a percentage. I don't know if that's intended, an entirely separate issue, or a separate issue that's affecting this one. But the first post quoted max-content width of a table-cell in a **constrained** column is... which doesn't seem to apply here.

All reactions davidsgrogan mentioned this issue Aug 21, 2018 [css-tables] column constrainedness and cell outer max-content width #3037 Open Copy link Member

davidsgrogan commented Aug 22, 2018 • edited Loading

Actually, @FremyCompany, could you write your math in the above comment more formally -- as in just max(a, min(b, c, d)) etc? I don't follow the prose too well. It's relevant to https://crbug.com/860084, which discusses how http://jsfiddle.net/dgrogan/hbtm85uk/9/ renders differently in Edge, FF, and Chrome. Edge/Chrome agree on the table width but don't agree on column width distribution. If you force FF to have Edge/Chrome's table width, then it agrees with Chrome on distribution. I'm trying to sort through all that.

All reactions Copy link Member

davidsgrogan commented Jul 20, 2019

I think the correct formula for outer max-content width of a table-cell in a non-constrained column is the existing formula with width and min-content width removed: max(min-width, min(max-width, max-content width))

All reactions Copy link Member

davidsgrogan commented Jul 20, 2019

Blink and FF do different things either for outer max-content width of a table-cell in a constrained column, or for max-content width of a column based on cells of span up to 1. In one of those places, FF lets a specified width on one cell override the max-content width of a different cell in the same column. FF makes below table 75px wide. Chrome makes it 100px. (Akin to first blue table in https://jsfiddle.net/dgrogan/9uduq99L/19/) <table> <tr><td style="width:75px;"></td></tr> <tr><td> <span style="display: inline-block; width: 50px;"></span><span style="display: inline-block; width: 50px;"></span> </td></tr> </table> I think chrome's makes more sense in isolation, because it's easy to remember that width is just another min-width for tables. But combined with the width distribution algorithm, it makes http://jsfiddle.net/dgrogan/hbtm85uk/9/ act in a way I consider weird in chrome and more sensical in FF.

All reactions Copy link Member

dbaron commented Jul 20, 2019

Based on memory (didn't check), I believe the Firefox behavior matches IE6... and I would suspect Edge as well.

All reactions Copy link Contributor

FremyCompany commented Jul 20, 2019

I just ran the test case in Chrome vs EdgeHTML, and they seem to match.

All reactions Copy link Contributor

FremyCompany commented Jul 20, 2019

(The only difference above is the fact Edge doesn't support the max-content keyword)

All reactions Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment Assignees

FremyCompany

Labels css-tables-3 Current Work Projects None yet Milestone No milestone Development

No branches or pull requests

4 participants You can’t perform that action at this time.