mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-11-25 19:17:19 +00:00
5125b91b3f
-moz-column* seems to have been dropped in Firefox. Added the non-prefixed, standard properties.
62 lines
1.6 KiB
Plaintext
62 lines
1.6 KiB
Plaintext
created: 20161209172820513
|
|
modified: 20161220161653258
|
|
tags: Learning
|
|
title: Formatting List Results as Tables with CSS - Specified Columns Methods
|
|
type: text/vnd.tiddlywiki
|
|
|
|
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:
|
|
|
|
* [[Formatting List Results as Tables with CSS - Variable Column Method]]
|
|
* [[Formatting List Results as Tables (no CSS)]]
|
|
|
|
|
|
!!! 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"><br>
|
|
<<foo>>
|
|
</$list>
|
|
@@
|
|
```
|
|
|
|
!! Example showing partial list of filter operators
|
|
|
|
<style>
|
|
.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;
|
|
}
|
|
</style>
|
|
|
|
|
|
@@.fourcolumns
|
|
<$list filter="[tag[Filter Operators]limit[24]]" variable="foo"><br>
|
|
<<foo>>
|
|
</$list>
|
|
@@
|