82 lines
2.9 KiB
Plaintext
82 lines
2.9 KiB
Plaintext
created: 20220817153236691
|
|
modified: 20221010074314452
|
|
tags: [[Tables in WikiText]]
|
|
title: Tables in WikiText CSS Utility Classes
|
|
type: text/vnd.tiddlywiki
|
|
|
|
~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 Classes, Captions, Headers and Footers}}
|
|
|
|
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
|
|
|
|
{{Utility Classes}}
|
|
|
|
! 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|HTML Block Elements]]
|
|
|
|
!! Centred Table
|
|
|
|
To center a table horizontally, use `tc-center`:
|
|
|
|
<<wikitext-example-without-html src:"""|tc-center|k
|
|
|This is a caption |c
|
|
|Cell1 |Cell2 |
|
|
|Cell3 |Cell4 |
|
|
|Header|Header|h
|
|
|Footer|Footer|f
|
|
""">>
|
|
|
|
!! 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`
|
|
|
|
<<wikitext-example-without-html src:"""|tc-center tc-max-width-80|k
|
|
|This is a caption |c
|
|
|Cell1 |<<.lorem>> |
|
|
|<<.lorem>> |Cell4 |
|
|
|Header|Header|h
|
|
""">>
|
|
|
|
!! Table with Maximum Width
|
|
|
|
To expand a table to full tiddler width, use `tc-max-width`
|
|
|
|
<<wikitext-example-without-html src:"""|tc-max-width|k
|
|
|Header|Header|h
|
|
|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`
|
|
|
|
<<wikitext-example-without-html src:"""|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"/> |
|
|
""">>
|
|
|
|
!! Table with Maximum Width ~TextWidgets
|
|
|
|
Here, the previous "form" is styled further to give the [[TextWidget]]s full width by adding the class `tc-edit-max-width`
|
|
|
|
<<wikitext-example-without-html src:"""|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"/> |
|
|
""">>
|
|
|
|
!! Table with No Borders
|
|
|
|
The following is a table with maximum width. It contains [[TextWidget]]s 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.
|
|
|
|
<<wikitext-example-without-html src:"""|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"/> |
|
|
""">>
|