[TW5] populating a table

[Jon]

Hi
the following will produce a list of tiddlers tagged with "mytag" in 3 columns when the CSS is applied from another tiddler tagged with $:/tags/Stylesheet.

@@.threecolumns
<div>

{{{ [tag[mytag]] }}}

</div>
@@

.threecolumns {
display:block;
column-count:3;
-moz-column-count:3;
-webkit-column-count:3;
color: red;
}

What do I need to introduce to alter the spacing between the columns?

Better still, is it possible to populate a table with a specified number of columns from the tiddlers tagged with mytag?

Thanks,
Jon.

[Odder]

Hi Jon,

to alter the spacing between the columns you have give them a width. In your example you have to add the following css to your code:

-moz-column-width:33%

-webkit-column-width:33%

or whatever you want for the width. For 3 columns with 33%  you have equal distance between the columns.

many regards
odder

[Jon]

Hi Odder,

thanks, but when I tried:

.threecolumns {
display:block;
column-count:3;
-moz-column-count:3;

-moz-column-width:33%;
}

I can change the number of columns but adjusting the % width didn't appear to make any difference.

Regards
Jon

[Odder]

Hi Jon,

this is new for me too, because I have only needed fixed width columns. A more flexible method is to use only column-width and not column-count. Then the column number is flexible to the window width (look here: https://css-tricks.com/almanac/properties/c/column-width) but values must be specified in px, not in %. Maybe someone else knows something more about this topic.

Many regards
Odder

Am Samstag, 7. März 2015 09:01:01 UTC+1 schrieb Jon:

[Jon]

Hi Odder,

thanks for the info.

Regards
Jon