Making Tables Responsive And Easier To Read

Tips & Tricks
,
5

That’s mostly CSS magic. The filter is only to apply this repeatedly for columns 1 - 20. (If we have wider tables, we can change that 20 to whatever seems helpful.)

table.test-table tr:hover {
  background: #ffe476;
}
/* This is the filter output */
table.test-table:has(tr > *:nth-child(1):hover) tr {
  > *:nth-child(1) {background: #c1eaff;}
  &:hover *:nth-child(1) {background: #aaefad>;}
}
table.test-table:has(tr > *:nth-child(2):hover) tr {
  > *:nth-child(2) {background: #c1eaff;}
  &:hover *:nth-child(2) {background:#aaefad;}
}
table.test-table:has(tr > *:nth-child(3):hover) tr {
  > *:nth-child(3) {background: #c1eaff;}
  &:hover *:nth-child(3) {background: #aaefad;}
}
/* ... */

The hard stuff is the CSS :has selector, which was finally added to Firefox in December of 2023.