CSS trick: Displaying tabular data in columns (draggable table rows)

CSS Customisation
1

Add this snippet to your CSS customizations at the bottom of Settings (PRO or Trial account required):

    .tag_columns + ul li del {
      text-decoration: none;
      float: left;
      width: 3rem;
    }
    
    .tag_columns + ul li del~del {width: 5rem;}
    .tag_columns + ul li del~del~del {width: 7rem;}
    .tag_columns + ul li del~del~del~del {width: 9rem;}

Tag a list with #columns. Any sub item added underneath has the ability to display text in columns. Text for each column should be marked as ~~deleted text~~.
The width for each column gets set in the CSS. In the example, first column is 3rem wide, second column 5 rem, third 7rem and fourth 9rem.

You can paste this list to check it out:

**Keyboard shortcuts for your preferred application** #columns
 - **~~ID~~ ~~Useful~~ ~~Shortcut~~ ~~Description~~**
 - []~~1~~ ~~👍~~ ~~<kbd>Ctrl+X</kbd>~~ ~~Cut text~~
 - []~~2~~ ~~👎~~ ~~<kbd>Ctrl+C</kbd>~~ ~~Copy text~~
 - []~~3~~ ~~❤~~ ~~<kbd>Ctrl+V</kbd>~~ ~~Paste text~~

image
image858×179 6.64 KB

2

Thanks for the post, an interesting trick, but probably it can be made simpier.

Checkvist supports GitHub-flavoured Markdown, so you can create tables using syntax like:

| ID |Useful|Shortcut|Description|
| --- | --- |--- |--- |
|1 | 👍 | <kbd>Ctrl+X</kbd> | Cut text | 
|2 | 👎 | <kbd>Ctrl+C</kbd> | Copy text | 
|3 | ❤ | <kbd>Ctrl+V</kbd> | Paste text |

Even without need to use extra CSS.

All the best,

3

Yes, I am aware of the markdown tables.
But I need to be able to reshuffle the individual rows, and to mark them done, similar to a to-do list.
I am using this to learn and memorize shortcuts. Will post a full example soon.

BTW, thanks for an excellent piece of software. Very impressed with Checkvist!

1 Like