[css-tables-3] max-width on table cells

[fantasai]

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~

[dbaron]

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.

[FremyCompany]

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.

[davidsgrogan]

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.

[davidsgrogan]

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.

[davidsgrogan]

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))

[davidsgrogan]

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.

[dbaron]

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

[FremyCompany]

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

[FremyCompany]

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