Tables in WikiText CSS Utility Classes

10th October 2022 at 7:43am

WikiText tables can be styled by applying CSS classes. For basic information on wiktext tables and how to style them, see Tables in WikiText.

Table CSS classes, captions, headers and footers can be specified as special pseudo-rows. The following example:

|myclass anotherClass|k assigns the CSS classes "myclass" and "anotherClass" to the table
|This is a caption |c gives the table the caption "This is a caption"
|Header|Header|h adds a header row of cells with the text "Header"
|Footer|Footer|f adds a footer row of cells with the text "Footer"

|myclass anotherClass|k
|This is a caption |c
|Cell1 |Cell2 |
|Cell3 |Cell3 |
|Header|Header|h
|Footer|Footer|f

That renders as:

This is a caption
Cell1	Cell2
Cell3	Cell3
Header	Header
Footer	Footer

As seen above, the resulting table is left aligned and grows to fit the content. This is the browser default layout behaviour for tables. To get another behaviour, various CSS classes can be added into the "k row".

Utility Classes

Introduced in v5.2.4 The following outlines a few predefined CSS classes intended to make it simpler to style HTML block-elements and wikitext tables.

General Utility Classes

`tc-center`	Centres a block-element to the middle of the container
`tc-max-width`	Expands a block-element to use the maximum width of the container
`tc-max-width-80`	Sets the width of a block-element to use 80% of the maximum container width. This setting is useful with the `tc-center` class
`tc-edit-max-width`	Expands TextWidgets to use the maximum available width. See ControlPanel -> Info -> Basics
`tc-first-link-nowrap`	Ensures that any links in the first table column will never wrap to the next line
`tc-clearfix`	New in v5.3.6 This class can be used to prevent elements, that have a `class="tc-float-right"` from overflowing their container elements. tc-clearfix is already assigned to all major ViewTemplate and EditTemplate elements. So it only needs to be used where the default does not work out of the box.

Table Utility Classes

`tc-table-no-border`	Removes the borders of a table
`tc-first-col-min-width`	The first column of a table will take up minimal possible width. It adapts to the content
`tc-table-wrapper`	New in v5.3.6 A class to be applied to a `div` element outside the table to prevent table from overflowing

Examples

The following examples apply the style classes to tables but the "General Utility Classes" can as well be used on DIVs or other HTML block elements

Centred Table

To center a table horizontally, use tc-center:

|tc-center|k
|This is a caption |c
|Cell1 |Cell2 |
|Cell3 |Cell4 |
|Header|Header|h
|Footer|Footer|f

That renders as:

This is a caption
Cell1	Cell2
Cell3	Cell4
Header	Header
Footer	Footer

Centred Table, 80% Width

To add empty left and right margins to a table that is otherwise full-tiddler-width, you can use tc-max-width-80

|tc-center tc-max-width-80|k
|This is a caption |c
|Cell1 |<<.lorem>> |
|<<.lorem>> |Cell4 |
|Header|Header|h

That renders as:

This is a caption
Cell1	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.	Cell4
Header	Header

Table with Maximum Width

To expand a table to full tiddler width, use tc-max-width

|tc-max-width|k
|Header|Header|h
|Cell1 |Cell2 |
|Cell3 |Cell4 |

That renders as:

Header	Header
Cell1	Cell2
Cell3	Cell4

Table with First Column Minimum Width

The following example shows a simple "form" where the first columns width is adjusted to its content by means of tc-first-col-min-width

|tc-max-width tc-first-col-min-width|k
|Header|Header|h
|Cell1 |<$edit-text tiddler="$:/temp/test-table-input" tag="input" field="test"/> |
|Cell3 |<$edit-text tiddler="$:/temp/test-table-input" field="text"/>  |

That renders as:

Header	Header
Cell1
Cell3

Table with Maximum Width TextWidgets

Here, the previous "form" is styled further to give the TextWidgets full width by adding the class tc-edit-max-width

|tc-max-width tc-first-col-min-width tc-edit-max-width|k
|Header|Header|h
|Cell1 |<$edit-text tiddler="$:/temp/test-table-input" tag="input" field="test"/> |
|Cell3 |<$edit-text tiddler="$:/temp/test-table-input" field="text"/>  |

That renders as:

Header	Header
Cell1
Cell3

Table with No Borders

The following is a table with maximum width. It contains TextWidgets with maximum width. The first column is set to be minimum width. Further, all links in the first column are set to not line break (wrap) regardless of window resize.

|tc-max-width tc-first-col-min-width tc-edit-max-width tc-table-no-border tc-first-link-nowrap|k
| Cell1|<$edit-text tiddler="$:/temp/test-table-input" tag="input" field="test"/> |
|^ [[Link to a tiddler]]<br>some more text|<$edit-text tiddler="$:/temp/test-table-input" field="text"/>  |

That renders as:

Cell1
Link to a tiddler some more text