[csswg-drafts] [Proposal] Table layout: supporting max-height on row groups or on rows, and max-width on column groups or on columns (along with overflow/overflow-x/overflow-y) (#5301)

verdy-p has just created a new issue for https://github.com/w3c/csswg-drafts:

== [Proposal] Table layout: supporting max-height on row groups or on rows, and max-width on column groups or on columns (along with overflow/overflow-x/overflow-y) ==
(reposted here: initially posted on https://github.com/whatwg/html/issues/5696; but this was closed without any discussion even though I was reading and commenting a draft page of the WHATWG group!)

https://html.spec.whatwg.org/multipage/tables.html#table-processing-model:concept-row-2

The specification still does not take into account the max-width/max-height CSS styles in tables for captions, rows, row groups ("thead", "tbody", "tfoot"), columns and column groups ("colgroup" elements).

We'd like to be able to constrain (or even hide) some rows/columns dynamically using these properties (along with "overflow:" to hide them or to allow scrollbars to appear automatically, the scollbars possibly "stealing" some width or height in the related column group or row group, or being displayed outside only when hovering their content if max-width and max-height are both non-zero and the content surface is not zero).

This would allow collapsing/uncollapsing table contents easily, or allow a user to resize rows/columns while still being to see the content. The content would scroll if needed and it cannot be reflowed, or the extra content would be hidden with overflow:hidden without any scrollbar (the content may still be draggable by some UI).

Currently "max-height:"/"max-width:" are valid in CSS, but they have no effect at all on table, colgroup, thead, tbody, tfoot, tr, td, th.

All that can be done is to contrain EACH cell individually, by putting its all content inside of a constraining block element (i.e. a "div" element inside "td" or "th" element): this is inefficient and it adds a lot of burden in Javascript, because it needs to scann all candidate cells to change the max-width/max-height properties of the div inside each of them.

Can you investigate on how to make "max-height:"/"max-width:" work for these elements and support the "overflow:"/"overflow-x:"/"overflow-y:" as well?

This would require updating the table layout computing model.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5301 using your GitHub account

Received on Wednesday, 8 July 2020 19:15:50 UTC