Styling Tables the Modern CSS Way

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

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!

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

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.

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

This does require:

0. Pagination.

1. Each table row must have the same height.

2. Use of javascript to calculate the max number of rows that will fit vertically in the viewport (and don't forget to include the height of the table header and pagination buttons in the calculation).

3. Send ajax request with row limit to server to retrieve and render the data.

You can see an example here: https://wee.domains

I thought that was weird, but now I think you might be right - if you use <table> and add display: grid to it then it might preserve the default role="row" and similar accessibility things.

From a quick google it appears the article is correct: https://www.tpgi.com/short-note-on-what-css-display-properti...

You can return the structure with judicious use of role attributes, but it’s surely easier to just keep a table a table.

> In some browsers, changing the display value of a <table> element to block, grid, or flex will alter its representation in the accessibility tree. This will cause the table to no longer be announced properly by screen reading technology.

1. <https://developer.mozilla.org/en-US/docs/Web/CSS/display#tab...>

I'm sure there are other good use cases. The fact that almost every site out there makes a point of using it on the worst possible way doesn't justify the "should only be used for table headers", even though, yeah, your sentiment is correct.