[css-tables][css-position] sticky cols

[inoyakaigor]

I want to suggest an idea that can help to display large tables: sticky position for table columns (for easy horizontal scroll). It is basic functionality in desktop programs like MS Excel. Currently we can find many solutions for this based on some CSS tricks and additional JS calculations but all of this is worst and have a lot of restrictions and errors in edge cases.

Basic concept:

• position: sticky only for first column
• position: sticky inside <td> styles makes this column stuck
• position: sticky for <tr> makes row stuck

Of course there are a big number edge cases (e.g. which behavior should be with table-layout: fixed?) and all of it will be resolved if this idea will develop

[SelenIT]

Technically, position: sticky is already supported for table cells (see example), so this approach already works in modern browsers. Some browsers still don't apply position: sticky to entire table rows and row groups, but this is just their known implementation bug that eventually will be fixed. Also, selecting the cells belonging to the same column may be rather tricky if the table has merged cells, but this should be addressed by the column combinator proposed in the CSS Selectors Level 4 spec.

[inoyakaigor]

@SelenIT I forgot to add what i mean about sticky column: sticky column to easy horizontal scroll. I'll update the initial message.

[SelenIT]

@inoyakaigor the example I linked to appears to demonstrate this behavior as well (try making the browser window narrower). Or am I missing something?

[inoyakaigor]

@inoyakaigor yes that is what I said