This page is part of a static HTML representation of the TiddlyWiki at https://tiddlywiki.com/

Formatting List Results as Tables with CSS - Specified Columns Methods

20th December 2016 at 4:16pm

Sometimes you want the results of a <$list> widget to be formatted in the form of multiple columns, instead of just one straight listing. This method uses ~CSS to set up listing as columns and assumes that you know how many columns you want. The method here is to create a style that reflects the number of columns you want your table to be in, and then apply that style to the resulting list output.

For other table-making techniques see also:

1) Create a tiddler for the columns tagged with $:/tags/Stylesheet, containing:

/* FOUR COLUMN MODE */
.fourcolumns {
   display:block;
   column-count:4;
   column-gap:1em;
   -moz-column-count:4;
   -moz-column-gap:1em;
   -webkit-column-count: 4;
   -webkit-column-gap:1em;
}

Note the various places you need to indicate the number of columns

2) Then format your output like this:

@@.fourcolumns
<$list filter="[tag[Filter Operators]]" variable="foo">
<<foo>><br>
</$list>
@@

Example showing partial list of filter operators

abs Operator
acos Operator
add Operator
addprefix Operator
addsuffix Operator
after Operator
all Operator
allafter Operator
allbefore Operator
append Operator
applypatches Operator
asin Operator
atan Operator
atan2 Operator
average Operator
backlinks Operator
backtranscludes Operator
before Operator
bf Operator
butfirst Operator
butlast Operator
ceil Operator
charcode Operator
commands Operator