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

Open
#5,301 2 comments 4 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Needs Design / Proposal
Dominant language
Bikeshed
Stars
4.9k
Forks
816
PR merge metrics
PR metrics pending

Description

(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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the table processing model section linked in the issue, focusing on how captions, rows, row groups, columns, and column groups are sized. Define the required max-width, max-height, and overflow behavior and update the specification's table layout model; no specific files or tests are named, so completion would require agreement on the design and corresponding specification changes.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.