[orangegreen]

Alright, shameless plug. I spend a ton of time trying to style this table of city data I had as nicely as I could. Getting CSS tables to not overflow in containers is a nightmare. I had to use a bit of Javascript to get the scroll shadows working using Intersection Observers.

I like HTML tables but getting them to do what you want can really be tricky.

Check out my table: https://caldwell.org/projects/data/city-index

[giraffe_lady]

HTML tables don't necessarily make this easy but but when you have numbers as tabular data, the "subcolumns" should line up when numbers have the same meaning. So if the number 17,000 is directly above 9,000, the 9 and 7 should be in same horizontal space.

A lot of fonts include tabular number variants (or just use them by default) which also makes them visually line up when you get this part correct. Not necessary but keeps the look cleaner, a real concern with dense numeric tables.

I got everything I know & believe about formatting data from edward tufte who has basically spent his entire career thinking and writing about it. But a really solid usable summary of this specific thing is on matthew butt­erick's site. https://practicaltypography.com/grids-of-numbers.html

[lelandfe]

This is quite good, so as a fellow frontend person I'll give some deeper notes, including accessibility.

1. There is perceptible lag when sorting.

2. Sortable headers are interactive yet are `div` elements: they can't be focused or used by screen readers. Instead, change them to `<button type="button>` elements and ensure `:focus` styles look OK.

3. When the table's sorted, consider applying an `aria-sort` attribute to the `th`. This informs a screen reader what order things are in.

4. As a sibling mentioned, consider text-aligning numbers to the right. It makes visual comparison of numbers with differing digit counts easier (with a similar aim, some pair this with, `font-variant-numeric: tabular-nums`)

5. On my small phone, the two stickied columns take up 50% of the screen. May not be worth the squeeze (perhaps just sticky the rank at tiny viewports?).

6. Also on my small phone, the horizontal shadows occlude all the content, making it hard to read.

7. I don't personally love the "click to select a row" feature. I double click to select text as I read it, or to copy, and that distractingly toggles the color on and off. Perhaps this makes more sense when there are actions that can be performed on a selected row?

8. Speaking of, clicking the rank cells do not select the row.

For an example on the a11y work, I'd recommend checking out WAI-ARIA's Sortable Table: https://www.w3.org/WAI/ARIA/apg/patterns/table/examples/sort...

These are pretty small asides; kudos overall.

[didgeoridoo]

This is literally the smoothest, most fluid table scrolling I’ve ever seen on the web (Mobile Safari). The scaling to viewport bounds, the shadow hinting at additional content… this is almost distractingly good.

Is this all one-off code, or have you packaged it for broader use?

[hipadev23]

> Getting CSS tables to not overflow in containers is a nightmare.

Is this because the total width/height consumed by a <table> isn't as simple as the normal content/padding/border/margin model?

That table you've created is lovely, nice work!

[sulandor]

> CSS tables > HTML tables

may i assume that you mean the same thing?

> I had to use a bit of Javascript to get the scroll shadows working using Intersection Observers.

everybody that is not a frontender: please don't