Table cell with long word respects max-width but not width

Question

I've observed a curiosity of how browsers (at least: Chrome, Firefox, and Safari) treat the max-width and width properties when applied to a table cell: if the cell contains a single huge word, then the width property will not be respected if it tries to set the cell's width to less than that required to contain the word.

That is, if I write this HTML, where the first table has a width of 100px and the second has a max-width of 100px and both contain a single huge word, then the first table renders really wide and the second gets constrained to 100px:

<style>
td {
    border: 1px solid; /* To help visualisation */
    word-wrap: break-word;
}
</style>
<table>
    <tr>
        <td style="width:100px">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
    </tr>
</table>
<table>
    <tr>
        <td style="max-width: 100px">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
    </tr>
</table>

Why is this the case? Should width be respected in this case? Is the difference in behaviour between width and max-width a browser bug, or is it somehow dictated by spec? A glance at the definitions of width and max-width in the CSS Level 2 spec and CSS Intrinsic & Extrinsic Sizing Module Level 3 (linked below) doesn't seem to immediately suggest any circumstances in which max-width should be respected but width disregarded; am I missing something?

Spec links:

you may consider this spec : https://www.w3.org/TR/CSS21/tables.html#fixed-table-layout .. by the way I know that width is ignored for td and other table element when the layout is auto and the width of content is bigger that the specified width... You can control this using the width on your table instead considering the fixed layout model: https://jsfiddle.net/gmr2aqxp/1/ — Temani Afif, Jul 21 '18 at 14:27
somehow related : https://stackoverflow.com/questions/18367959/table-columns-setting-both-min-and-max-width-with-css — Temani Afif, Jul 21 '18 at 14:33
@LGSon Those duplicates are only relevant insofar as they indicate that the behaviour of `max-width` on tables is undefined. Admittedly that's a useful partial answer! But they don't address why `width` is not respected in this case (nor offer a workaround). — Mark Amery, Jan 04 '19 at 22:30
@LGSon I'm thinking it may be best for me to spin off a separate, narrower question that addresses only that point in particular (i.e. explicitly asking only about why `width`'s behaviour here is the way it is, and not asking about why `max-width`'s behaviour is the way it is). Once I've done so, would you rather that I delete this one (which is useless as a signpost, since it's not answered by the dupes) or that I give you a link to the new one so that you can add it to the duplicate list here? — Mark Amery, Jan 04 '19 at 22:34
The reason `max-width` behaves as it does in e.g. Chrome/Firefox/Safari is because their maker decided, beyond what the specs. says, to actually honor it. Why the `width` behaves as it does, is within the specs., where a table cell can't be smaller than its content. In your case, to make the cell keep its set width, you need the older `word-break: break-word;` instead of `word-wrap: break-word;` — Asons, Jan 04 '19 at 23:25
Another option for a cell to keep its set width is `table { width: 100%; table-layout: fixed; }`, and the width is needed or else it keeps growing to fit its content. — Asons, Jan 04 '19 at 23:32
Given there is an answer, and narrow the question down would invalidate it (even if it is not a good one), I suggest you delete this and post a new. I think there is an answer in here somewhere, that answer the `width` behavior, so I will have a look when I see your new post. — Asons, Jan 04 '19 at 23:38
This link might shed some light: https://www.w3.org/TR/CSS2/tables.html#propdef-table-layout where the section "17.5.2.2 Automatic table layout" explain its default behavior — Asons, Jan 04 '19 at 23:53
And this stack post might be a possible dupe: https://stackoverflow.com/questions/45529911/table-column-expand-width-based-on-content — Asons, Jan 04 '19 at 23:59
@LGSon Suggested extra dupe to add to the dupe list: https://stackoverflow.com/q/1258416/1709587 — Mark Amery, Jan 20 '19 at 17:10

Table cell with long word respects max-width but not width

0 Answers0