Add sticky-csv-header feature

[FloEdelmann]

Browsing big CSV files in GitHub's UI is difficult, because the table header scrolls away. This CSS-only feature makes the first line and the row numbers sticky.

Unfortunately, there are double vertical scrollbars now, but I think this still improves the usability.

Test URLs

• horizontal + vertical scrolling: https://github.com/fxedel/vaterstetten-in-zahlen/blob/2c3ab1c/data/energie/mastrPhotovoltaik.csv
• vertical scrolling only: https://github.com/fxedel/vaterstetten-in-zahlen/blob/2c3ab1c/data/einwohner/lfstatFortschreibungJahre.csv
• horizontal scrolling only: https://github.com/microCOVID/microCOVID/blob/181201b/public/prevalence_data/US_50.csv
• no scrolling: https://github.com/fxedel/vaterstetten-in-zahlen/blob/2c3ab1c/data/einwohner/lfstatVolkszaehlungen.csv
• .tsv file: https://github.com/4dcu-be/GitHub-Actions-KeyForge/blob/8d53ec2/data/keyforge_decks.tsv
• too large to even show the file contents: https://github.com/mattkinsey/covid19-vaccine-timeseries/blob/cf7362eb71491a1f3ba229eef80d11ca1aa27170/vacc-timeseries.csv
• too large to make it beautiful and searchable: https://github.com/fxedel/vaterstetten-in-zahlen/blob/2c3ab1c/data/corona-fallzahlen/arcgisInzidenzGemeinden.csv
• no commas found: https://github.com/fxedel/vaterstetten-in-zahlen/blob/2c3ab1c/data/kommunalwahl2020/raw/Open-Data-Buergermeisterwahl-Bayern1173.csv

Screenshots

Before

After

[fregante]

Thanks for opening the PR! The feature is reasonable, CSS-only, short and you already wrote it, tested and documented it.

Hard to reject it for #5892 🤭

[fregante]

Does this apply only to CSV data and other tabular data?

[FloEdelmann]

I think it does.

[fregante]

On second thought… nested scroll areas aren't my favorite and this only works well if you perfectly align the scroll area to the viewport. It shouldn't be necessary

[FloEdelmann]

It is necessary, since that element is already scrolling horizontally.

[fregante]

I think the nested scroll-area makes this unusable :(

Achieving your screenshot means carefully scrolling the main document to fit the table.

Overscrolling means that the headers are sticky, but outside the viewport, so still not visible; underscrolling means that the headers are sticky, but in the middle of the viewport. Fixing the main scroll means having to find a corner of the viewport outside this nested scroll area.

And I don't even wanna think of how impossible this is on mobile.

We can only merge it if there's a way to have the sticky headers without using max-height: 100vh

[FloEdelmann]

I've committed an alternative solution now that lets the whole page scroll instead of only the table. However, the other elements also scroll away horizontally now. We might be able to fix that though by applying position: sticky; left: 0; to all of them.

[fregante]

Nice trick, but this looks broken

[fregante]

How about only making the row headers sticky? That would be an improvement already, even if not complete

[FloEdelmann]

I've changed it to make only the row headers sticky.

[fregante]

I'm not seeing this in the latest version, so I'll drop it (also because unrelated). Feel free to open a new PR