[tw] 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]

Post by 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

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

Post by Eric Shulman

Post by 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

<style>
.scrollable { display:block; overflow:auto; }
</style>
|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

[Lost Admin]

Nice trick.

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

Post by Eric Shulman

Post by 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

<style>
.scrollable { display:block; overflow:auto; }
</style>
|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

[Eric Shulman]

Post by Lost Admin
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; }

enjoy,
-e
Eric Shulman
TiddlyTools.com: "Small Tools for Big Ideas" (tm)
InsideTiddlyWiki: The Missing Manuals