Is there a way to place 2 tables side by side?

226 views
Skip to first unread message

jrbast

unread,
Feb 18, 2009, 3:26:09 PM2/18/09
to TiddlyWiki
I have a need to place 2 small tables side by side, instead of above
one another to save on vertical screen space.

Or if I could make a single table look like 2 by selectively turning
off row and column boarders

Harald

unread,
Feb 18, 2009, 3:30:57 PM2/18/09
to TiddlyWiki
MonkeyGTD has a few nice CSS rules for setting two columns side-by-
side. You might use these rules to arrange two tables side-by-side.
MonkeyGTD itself makes extensive use in many of its dashboard views.

jrbast

unread,
Feb 18, 2009, 3:36:54 PM2/18/09
to TiddlyWiki
Can you be more specific. examples? I can't seem to find any info on
the http://monkeygtd.tiddlyspot.com/ site

jrbast

unread,
Feb 18, 2009, 3:43:27 PM2/18/09
to TiddlyWiki
I also see some syntax like:
{{cols2{

{{col{
test1
}}}

{{col{
test2
}}}
}}}

But must require some sort of plugin

On Feb 18, 2:30 pm, Harald <harald.albre...@gmx.net> wrote:
Message has been deleted

Harald

unread,
Feb 18, 2009, 4:09:57 PM2/18/09
to TiddlyWiki
In principle, you don't need a plugin. Create your own StyleSheet
tiddler or add to it if you alread have one the CSS stuff below. I've
taken the CSS rules from the MonkeyGTDTheme tiddler, ##StyleSheet
section.

/* ============= new div based columns ================= */
.col {
float: left;
vertical-align:top;
}

.cols3, .cols2 {
overflow: auto; /* contains floats. tnx FND */
}

/* IE not doing these right :( */
/* .cols3>br, .col>br { display:none; } */

/* so try this instead. it's annoying and will mean you have trouble
with brs in non-mgtdlist content. .normal might help */
.cols2 br, .cols3 br { display:none; }
.mgtdList br, .normal { display:block!important; }
.col .mgtdList { margin-bottom:1.5em; } /* since we're no longer
seeing the brs... */

.cols3 .col {
width: 33%;
}
.cols2 .col {
width: 49%; /* 50% makes IE put them under each other */
}
.clear {
clear: left;
}
/* ============= */

Eric Weir

unread,
Feb 19, 2009, 9:08:18 AM2/19/09
to Tiddl...@googlegroups.com

On Feb 18, 2009, at 3:43 PM, jrbast wrote:

>
> I also see some syntax like:
> {{cols2{
>
> {{col{
> test1
> }}}
>
> {{col{
> test2
> }}}
> }}}
>
> But must require some sort of plugin

Below is a response from wolfgang to my request for help in getting
text into two columns. I've been using it ever since without problem.
It requires no plugin. Just put the code into your StyleSheet and then
use the suggested syntax to format your tiddler. Perhaps it will work
with tables, too. I had to fiddle around to figure out how get the
syntax in the tiddlers to work. If need help with that, ask.

On Dec 5, 2008, at 11:04 AM, wolfgang wrote:

> Hi Eric,
>
>> -- if I could create a one-row table with two or three
>> columns each a set width and depth regardless of the amount of text
>> entered into them. Maybe this is possible?
>>
>
> You can place the following into your StyleSheet:
>
> /* custom styles for parallel columns. Classes cola and colb */
> .cola {width:45%; float:left; margin-left:0.5em;}
> .colb {width:45%; float:left; margin-left:1.5em;}
> .clear{clear:both;}
>
> After which you can use the following syntax in a tiddler:
>
> {{cola{Contact information:}}}{{colb{Additional notes ...}}}{{clear
> {}}}
>
> An other example of this use of columns you can see in edit mode of
> this tiddler:
>
> http://change.tiddlyspot.com/#MptwThemes
>
> Regards,
>
> W.

----------------------------------------------------------------------
Eric Weir
Decatur, GA USA
eew...@bellsouth.net

jrbast

unread,
Feb 19, 2009, 9:09:09 AM2/19/09
to TiddlyWiki
Works pretty good, but one issue is that if you put multiple lines of
text in a column, all the lines of text get concatenated together.
Meaning you can't have blank lines or multiple paragraphs in a single
column. Any work around one could put in a stylesheet? I tried
using <br><br> in the text, but had no effect.

Eric Weir

unread,
Feb 19, 2009, 9:12:10 AM2/19/09
to Tiddl...@googlegroups.com

On Feb 19, 2009, at 9:09 AM, jrbast wrote:

> Works pretty good, but one issue is that if you put multiple lines of
> text in a column, all the lines of text get concatenated together.
> Meaning you can't have blank lines or multiple paragraphs in a single
> column. Any work around one could put in a stylesheet? I tried
> using <br><br> in the text, but had no effect.

wolfgang's solution, which I just posted, doesn't have this problem.
Blank lines and multiple paragraphs are OK.

jrbast

unread,
Feb 19, 2009, 12:10:54 PM2/19/09
to TiddlyWiki
Here's my test tiddler data and actual display:
{{cols2{

{{col{
Test data in column 1

test paragraph

}}}

{{col{
Test data in column 2
}}}

}}}

Resulting display:
colstest
(updated just now by jeffbast)

Test data in column 1test paragraph Test data in
column 2

jrbast

unread,
Feb 19, 2009, 12:12:58 PM2/19/09
to TiddlyWiki
Tables work just file, including placing two tables vertically within
a single column, blank line between tables. It's the multiple lines
or paragraphs of text that get concatenated together

Eric Weir

unread,
Feb 19, 2009, 1:05:58 PM2/19/09
to Tiddl...@googlegroups.com

On Feb 19, 2009, at 12:10 PM, jrbast wrote:

> Here's my test tiddler data and actual display:
> {{cols2{
>
> {{col{
> Test data in column 1
>
> test paragraph
>
> }}}
>
> {{col{
> Test data in column 2
> }}}
>
> }}}

Try this instead:
{{cola{Test data in column 1

test paragraph}}}{{colb{Test data in column 2}}}
{{clear{
}}}

If you put the code suggested for the StyleSheet in the StyleSheet, it
should give you two columns with the first line of the second on the
same line as the first line of the first.

Regards,

jrbast

unread,
Feb 19, 2009, 2:01:27 PM2/19/09
to TiddlyWiki
Not sure what your trying to say, but here's a simple example:

{{cols2{

{{col{
col1_line1

col1_line2
}}}
{{col{
col2_line1
}}}

}}}

This displays:
col1_line1col1ine2 col2_line1

Instead of what I would expect:
col1_line1 col2_line1

col1_line2

Th col2_line1 is displayed in a second column ok, but the text
col1_line2 is concatenated directly after the text col1_line1 like the
example above. What is the {{clear{ used for?

Eric Weir

unread,
Feb 19, 2009, 2:44:04 PM2/19/09
to Tiddl...@googlegroups.com

On Feb 19, 2009, at 2:01 PM, jrbast wrote:

> Not sure what your trying to say, but here's a simple example:

What I'm saying is do what I suggest.

Put this in your StyleSheet:

>> /* custom styles for parallel columns. Classes cola and colb */
>> .cola {width:45%; float:left; margin-left:0.5em;}
>> .colb {width:45%; float:left; margin-left:1.5em;}
>> .clear{clear:both;}
>

Then put this in a tiddler:

{{cola{Test data in column 1

test paragraph}}}{{colb{Test data in column 2}}}
{{clear{
}}}

It *will* give you two columns both starting on the same line.

I don't know what I'm talking about. What I know is that the above
works. It was given to me by wolfgang. I did what he said.

Eric Weir

unread,
Feb 19, 2009, 3:07:05 PM2/19/09
to Tiddl...@googlegroups.com

On Feb 19, 2009, at 2:01 PM, jrbast wrote:

> Not sure what your trying to say, but here's a simple example:
>
> {{cols2{
>
> {{col{
> col1_line1
>
> col1_line2
> }}}
> {{col{
> col2_line1
> }}}
>
> }}}

Not sure you're trying to do what I suggested. If so, the above isn't
it. The equivalent for the above translated into what was suggest is:

{{cola{"col1_lin1

col1_line 2}}}{{colb{col2_line1}}}
{{clear{
}}}

The above will give you two columns with two lines separated by a
blank line in the first column.

> What is the {{clear{ used for?

If you don't have it the contents will spill out of the bottom of the
tiddler.

jrbast

unread,
Feb 19, 2009, 3:41:01 PM2/19/09
to TiddlyWiki
Your example pasted into a new tiddler gives me these results:

"col1_lin1

col1_line 2col2_line1

jrbast

unread,
Feb 19, 2009, 3:53:33 PM2/19/09
to TiddlyWiki
Using your StyleSheet code for .cola and .colb, i get these results:

Test data in column 1

test paragraphTest data in column 2

The "Test data in column 2 does not end up in a new column, but does
get concatenated to "test paragraph" as shown above.

I will test again with a completely cleared out Stylesheet containing
just your 4 lines.

jrbast

unread,
Feb 19, 2009, 3:58:44 PM2/19/09
to TiddlyWiki
Finally got it working....

Sorry for causing you so much grief

Thanks

On Feb 19, 2:41 pm, jrbast <jrb...@gmail.com> wrote:

jrbast

unread,
Feb 19, 2009, 4:42:45 PM2/19/09
to TiddlyWiki
Your code works for both text and tables, Harold's has the
concatenated text problem for any and all text you place into a "col"
using col2 or cols3

Eric Weir

unread,
Feb 19, 2009, 8:57:31 PM2/19/09
to Tiddl...@googlegroups.com

On Feb 19, 2009, at 4:42 PM, jrbast wrote:

> Your code works for both text and tables . . .

God, it's not *my* code! I'm incapable of composing a line of code.

It was given to me by wolfgang. I suspect it was given to him by
someone else, since he, too, protested that he couldn't compose a line
of code. [Though I was never able to quite believe him.]

Curious. Had you put the four lines of code in your StyleSheet before
it started working?

jrbast

unread,
Feb 20, 2009, 8:50:02 AM2/20/09
to TiddlyWiki
Yes, I actually had both yours and wolfgangs. Once I removed his,
yours worked..

M)

unread,
Feb 20, 2009, 1:20:01 PM2/20/09
to TiddlyWiki
Also try transclusion...

|<<tidder TableOne>>|<<tiddler TableTwo>>|

The TiddleWithEdit plugin is nice to have.


M)
Reply all
Reply to author
Forward
0 new messages