diff options
Diffstat (limited to 'docs/src/elements/tables.pug')
-rw-r--r-- | docs/src/elements/tables.pug | 59 |
1 files changed, 55 insertions, 4 deletions
diff --git a/docs/src/elements/tables.pug b/docs/src/elements/tables.pug index 3e087d9..5eec15d 100644 --- a/docs/src/elements/tables.pug +++ b/docs/src/elements/tables.pug @@ -14,7 +14,7 @@ block docs-content .docs-demo.columns .column.col-12 - table.table.table-striped + table.table thead tr th Name @@ -40,7 +40,57 @@ block docs-content p | Add the #[code table] class to any #{'<table>'} element. - | The class will add padding, border and emphasized table header. + | The class will add padding, border and emphasized table header. + + pre.code(data-lang='HTML') + code + :highlight(lang="html") + <table class="table"> + <thead> + <tr> + <th>name</th> + <th>genre</th> + <th>release date</th> + </tr> + </thead> + <tbody> + <tr class="active"> + <td>The Shawshank Redemption</td> + <td>Crime, Drama</td> + <td>14 October 1994</td> + </tr> + </tbody> + </table> + + +docs-subheading('tables-striped', 'Striped tables') + + .docs-demo.columns + .column.col-12 + table.table.table-striped.table-hover + thead + tr + th Name + th Genre + th Release date + tbody + tr + td The Shawshank Redemption + td Crime, Drama + td 14 October 1994 + tr.active + td The Godfather + td Crime, Drama + td 24 March 1972 + tr + td Schindler's List + td Biography, Drama, History + td 4 February 1994 + tr + td Se7en + td Crime, Drama, Mystery + td 22 September 1995 + + p | Use the #[code table-striped] class to #{'<table>'} to add zebra striped style. | For hoverable table rows, you can add the #[code table-hover] class to enable hover style. p @@ -66,10 +116,11 @@ block docs-content </tbody> </table> + +docs-subheading('tables-scroll', 'Scrollable tables') .docs-demo.columns .column.col-12 - table.table.table-striped.table-scroll + table.table.table-scroll thead tr th Name @@ -114,7 +165,7 @@ block docs-content pre.code(data-lang='HTML') code :highlight(lang="html") - <table class="table table-striped table-scroll"> + <table class="table table-scroll"> ... </table> |