Making Tables Responsive And Easier To Read

Tips & Tricks
,
#1

With the recent cafe about Beautiful Wikis, I thought it might interest some others a neat CSS trick I picked up from working with excel for long hours.

With just a bit of CSS, you can have tables, even made with wiki-text, highlight the row and specific cell you are using. You can use the snippet of code below in any tiddler at a fresh copy of TiddlyWiki to see it in action.

 <style>
table.test-table tr:hover {
background: <<colour primary>>50;
}
table.test-table tr td:hover {
background: <<colour background>>;
border: solid 1px <<colour primary>>;
}
</style>

|test-table|k
| hello | hello | hello |
| hello | hello | hello |
| hello | hello | hello |

If you would like all tables in a tiddler to follow this without needing to set a css tag, you can modify the code to:

<style>
div.tc-tiddler-frame.tc-tiddler-edit-frame table tr:hover, div.tc-tiddler-frame.tc-tiddler-view-frame table tr:hover {
background: <<colour primary>>50;
}

div.tc-tiddler-frame.tc-tiddler-edit-frame table tr td:hover, div.tc-tiddler-frame.tc-tiddler-view-frame table tr td:hover {
background: <<colour background>>;
border: solid 1px <<colour primary>>;
}
</style>

Hopefully this helps others as it’s helped me :blush:

9 Likes
#2

This is great. You can extend this to handle columns using some dynamic CSS:

style>
table.test-table tr:hover {
  background: <<colour alert-background>>;
}

<$list filter=[range[1],[20]] variable="n">
  table.test-table:has(tr > *:nth-child(<<n>>):hover) tr {
    > *:nth-child(<<n>>) {background: <<colour testcase-accent-level-1>>;}
    &:hover *:nth-child(<<n>>) {background: <<colour diff-insert-background>>;}
  }
</$list>
</style>

|test-table|k
| hello | hello | hello | hello | hello | hello |
| hello | hello | hello | hello | hello | hello |
| hello | hello | hello | hello | hello | hello |
| hello | hello | hello | hello | hello | hello |
| hello | hello | hello | hello | hello | hello |
4 Likes
#3

very neat!

A suggestion - instead of border:, use outline: - it has the same basic visual effect, but it doesn’t alter the spacing of the rest of the table if there is an existing border of a different value. (set your border to 20px to create an exaggerated example of the issue, then switch to outline with the same 20px)

I now have this globally:

div.tc-tiddler-frame.tc-tiddler-edit-frame table tr:hover, div.tc-tiddler-frame.tc-tiddler-view-frame table tr:hover {
  background: <<colour primary>>11;
}

div.tc-tiddler-frame.tc-tiddler-edit-frame table tr td:hover, div.tc-tiddler-frame.tc-tiddler-view-frame table tr td:hover {
  background: <<colour background>>66;
  outline: solid 2px <<colour primary>>66;
}
3 Likes
#4

You know, I use this for my onHover for the tags in my TW but I totally forgot it exists, but your right, it would be a smarter choice to use it in place of border, thank you for the improvement :smiley:

also, my minds still blown from the filter magic that was done for columns to be highlighted, that is so awesome lol

#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.

#6

Oh I’ve played with the has selector in the past, is it universally supported on modern browsers now?? I hope so, there was some cool stuff I made to work with it’s help.

…

Alrighty! I’ve taken all the improvements from the thread so far and bundled it up into a single snippet of code anyone can throw into a tiddlywiki to play around with, seperated based on having it apply to specifically tagged tables and all tables within a tiddler.

Table Row, Column, And Cell Highlighting CSS.json (2.2 KB)

Thank you to everybody for the improvements, this has turned into something super cool lol

1 Like
#7

It depends on your notion of universal: https://caniuse.com/?search=%3Ahas. It’s available on all evergreen browsers, and the vast majority of common usage, but there are some older browsers without it.

1 Like