Skip to content

Commit

Permalink
feat: add css upside down table trick til
Browse files Browse the repository at this point in the history
  • Loading branch information
jthodge committed Aug 28, 2024
1 parent 6c98654 commit b254ba3
Showing 1 changed file with 17 additions and 0 deletions.
17 changes: 17 additions & 0 deletions css/upside-down-table-trick.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
# Upside Down Table Trick

It can be difficult to build highly customizable, scrollable tables.
Relocating a horizontal table's scrollbar from the default bottom position, to the top of a table, is one such finnicky customization.

To accomplish this:

1. Flip the table's parent wrapper `<div>` upside down, using `rotateX(180deg)`
2. Place the header at the bottom (which, at this point, is the top)
3. Flip the `<tbody>` inside th table
4. Flip the content inside the `<thead>`.

This will relocate the table's scrollbar to the top. And, moreso, it will be sticky, so it's always within reach.

via. [RGBCube](https://lobste.rs/s/dghv8d/please_make_your_table_headings_sticky#c_iztvit).

[PoC](https://lobste.rs/s/dghv8d/please_make_your_table_headings_sticky#c_hww77t)

0 comments on commit b254ba3

Please sign in to comment.