[TW5] How do I right align a table?

[Daniel Gee]

There's lots of guides to right-align text within a table, but I want to right align the table itself so that text can flow around it (it's narrow, but very tall). How would I do this?

There's some examples of centering a table that seem to only work with the old versions of TW, and I've seen none for TW5.

[Eric Shulman]

On Saturday, July 12, 2014 10:11:10 PM UTC-7, Daniel Gee wrote:

There's lots of guides to right-align text within a table, but I want to right align the table itself so that text can flow around it (it's narrow, but very tall). How would I do this?

First, create a tiddler, tagged with "$:/tags/stylesheet" containing the following CSS rule:

.righttable { margin-left:auto; margin-right:0; float:right }

Then, in your tiddler content, wrap your table in a style block, like this:

@@.righttable
|test|this|
|table|entry|
|another|row|
@@

That should do it.

enjoy,

-e

Eric Shulman

TiddlyTools / ELS Design Studios

YOUR DONATIONS ARE VERY IMPORTANT!

HELP ME TO HELP YOU - MAKE A CONTRIBUTION TO MY "TIP JAR"...

   http://TiddlyTools.github.com/fundraising.html#MakeADonation

Professional TiddlyWiki Consulting Services...

Analysis, Design, and Custom Solutions:

   http://www.TiddlyTools.com/#Contact

[CB]

I am not very experienced but use of CSS classes should be able to define alignment properties. See

* http://tiddlywiki.com/static/Tables%2520in%2520WikiText.html

* http://www.granneman.com/webdev/coding/css/centertables/ (Will require some modification to achieve right alignment).

On Saturday, July 12, 2014 10:11:10 PM UTC-7, Daniel Gee wrote:

[Eric Shulman]

On Saturday, July 12, 2014 10:39:35 PM UTC-7, Daniel Gee wrote:

Yep, that worked!

Though, I guess I have to be careful because if the text doesn't go all the way past the table then the tiddler gets cut off early and the table runs into the next tiddler and things look crazy.

You can force the tiddler to fit the entire table.  First, put the following CSS in a tiddler tagged with $:/tags/stylesheet tiddler (just add it to the tiddler you created as per my previous post).

.clear { display:block; clear:both; }

Next, in your tiddler content, put "@@.clear @@" following the 'flowed' text, like this:

@@.righttable
... table definition here ...
@@
... text to be wrapped here ...
@@.clear @@

[Daniel Gee]

Oh, that all works perfectly now. Wonderful.

[Stephan Hradek]

As already state some time ago, a clearing elememnt is not required. https://groups.google.com/d/msg/tiddlywikidev/a23v2KQufTk/C4uPEi1e0IsJ

In this case, where a table is floating, the code needs to be slightly a bit different, but I think this change will apply also to divs. Search the web for "clearfix hack" for background information.

So add this CSS if you do not want additional stuff in your tiddler:

.righttable::after {
    content: "";
    display: table;
    clear: both;
}

[Daniel Gee]

Yep, that worked!

Though, I guess I have to be careful because if the text doesn't go all the way past the table then the tiddler gets cut off early and the table runs into the next tiddler and things look crazy.