Big tables

[Ste Wilson]

I'm sure this is a solved problem but...
Inspired by Ms McEnzie of London, Italy and her recent trip to a furniture store I too have decided it is time for some big tables in my tiddlywiki (got there eventually).
On mobile they spill out over the edge of the tiddler and have to be viewed with a sideways swipe. Is there anyway short of an iframe of confining it to the tiddler but having scroll bars in the tiddler?
Is my understanding correct that Fortran I frame is have to host the content somewhere else?
Cheers all

[Ste Wilson]

*that for an iframe...

[Eric Shulman]

First, create a CSS class with the following styles:

<style>

.scrollable { display:block; overflow:auto; }

</style>

Then, apply it to the table like this:

|scrollable|k

|long|table|that|overflows|the|side|of|the|tiddler|and|need|to|be|scrolled|longerheadingtext|andmoreheadingtext|andstillmoreheadingtext|

|long|table|that|overflows|the|side|of|the|tiddler|and|need|to|be|scrolled|longerheadingtext|andmoreheadingtext|andstillmoreheadingtext|

|long|table|that|overflows|the|side|of|the|tiddler|and|need|to|be|scrolled|longerheadingtext|andmoreheadingtext|andstillmoreheadingtext|

|long|table|that|overflows|the|side|of|the|tiddler|and|need|to|be|scrolled|longerheadingtext|andmoreheadingtext|andstillmoreheadingtext| 

enjoy,

-e

Eric Shulman

TiddlyTools.com: "Small Tools for Big Ideas" (tm)

InsideTiddlyWiki: The Missing Manuals

[Stephen Wilson]

Perfect.

Removed the style tags, set type to css and tagged as $:/tags/Stylesheet and it worked a charm.

Cheers

Stephen

[Lost Admin]

Nice trick.

Is there a way to add that to all tables without needing to specify |scrollable|k on the top?

[Eric Shulman]

On Friday, October 6, 2017 at 5:40:18 AM UTC-7, Lost Admin wrote:

Nice trick.

Is there a way to add that to all tables without needing to specify |scrollable|k on the top?

Instead of defining a separate ".scrollable" class, just apply the CSS directly to the "table" element, like this:

table { display:block; overflow:auto; }

Note: the above rule will be applied to ALL tables in the TW document, including some that might be used outside of tiddler content (e.g. in the sidebar), so you might want to make the rule a bit more specific, like this:

.tc-tiddler-body table { display:block; overflow:auto; }