I want to be able to control scrolling in tables

Submitted by Anonymous

Spreadsheet applications like Excel, Calc, Numbers, and Sheets enable certain rows and columns to be frozen. I would like to have the same capability in the table element. Perhaps this could be achieved using new attributes on the opening table tag:

  <table freeze-columns="2"
freeze-rows="1"
>

Picking up on syntax common in other areas, positive numbers would start at the leading edge of the horizontal or vertical axis and negative numbers would start at the end. For simplicity, row numbering would need to be applied universally—ignoring any encapsulation within thead, tbody, and tfoot—and calculations would have to be done based on render order as tfoot is supposed ot come after thead, but before any tbody elements. Similarly, columns would need to ignore colgroup collections.

It would make sense to enable the same behavior from CSS as well:

thead tr,
tfoot tr,
tbody tr > th:first-child
{
display: frozen;
}

The primary challenge to something like this would be determining how tall/wide to render the table in the absence of specific instructions to that effect.

To achieve anything like this today, we must write complex components using JavaScript and ugly CSS hacks to simulate this behavior and the end result loses some of the best parts of tables (including accessibility).

Tagged
CSS HTML