A question about tables and columns

#1

Hello to all you TW experts.

I have a question about tables. I created a table which consists of five columns for my work-related project flow. It is basically a kanban where I drag projects from one column to another as certain stages in the process are completed.

This is the table:

|tc-max-width tc-table-no-border|k
|^{{$:/JMW/dashboard/jobsBacklog}} |^{{$:/JMW/dashboard/jobsLayout}} |^{{$:/JMW/dashboard/jobsDesign}} |^{{$:/JMW/dashboard/jobsBuild}} |^{{$:/JMW/dashboard/jobsInstall}} | |

It pulls in other tiddlers that define what is in the columns and provides a dropzone for changing project tiddlers from one column to another. It looks something like this:

image
image1340×112 10.1 KB

On my phone the columns are too wide and overflow the screen in portrait mode. Is there a way to change the table to instead show something like this for small screens? I am great at cut and paste, not so much at new development :grin:.

image

Basically I would like to see five columns on wider screens and three columns / two rows on narrow ones.

#2

Tables have their own browser internal layout system, that is very unpredictable and hard to control.

So IMO the best way to go would be to use display: flex and use cards similar to TiddlyWiki on the Web

2 Likes
#3

Thank you, that looks interesting.

#4

After playing around with flexbox for a while and figuring out what it does I came up with a solution. It’s not quite the same but I set it up to change from horizontal to vertical display on small screens. Keeping horizontal with wrap resulted in a bowling-pin type display that I didn’t like.

On small screens I get this now, which I like:

image

Thanks for the pointer @pmario