Merge pull request #522 from picturepan2/0.5.5 v0.5.5

0.5.5

1 files changed, 123 insertions, 0 deletions

diff --git a/docs/src/elements/tables.pug b/docs/src/elements/tables.pug
new file mode 100644
index 0000000..3e087d9
--- /dev/null
+++ b/docs/src/elements/tables.pug
@@ -0,0 +1,123 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'tables'
+  - var parent = 'elements'
+  - var title = 'Tables - Elements - Spectre.css CSS Framework'
+  - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
+
+block docs-content
+  +docs-heading('tables', 'Tables')
+    include ../_layout/_ad-g.pug
+
+    p Tables include default styles for tables and data sets.
+
+    .docs-demo.columns
+      .column.col-12
+        table.table.table-striped
+          thead
+            tr
+              th Name
+              th Genre
+              th Release date
+          tbody
+            tr
+              td The Shawshank Redemption
+              td Crime, Drama
+              td 14 October 1994
+            tr
+              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
+      | Add the #[code table] class to any #{'<table>'} element. 
+      | The class will add padding, border and emphasized table header. 
+      | 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
+      | Use the #[code active] class to make #{'<tr>'} element highlighted.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <table class="table table-striped table-hover">
+            <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-demo.columns
+      .column.col-12
+        table.table.table-striped.table-scroll
+          thead
+            tr
+              th Name
+              th Rating
+              th Duration
+              th Genre
+              th Release date
+              th Director
+          tbody
+            tr
+              td The Shawshank Redemption
+              td R
+              td 2h 22min
+              td Crime, Drama
+              td 14 October 1994
+              td Frank Darabont
+            tr
+              td The Godfather
+              td R
+              td 2h 55min
+              td Crime, Drama
+              td 24 March 1972
+              td Francis Ford Coppola
+            tr
+              td Schindler's List
+              td R
+              td 3h 15min
+              td Biography, Drama, History
+              td 4 February 1994
+              td Steven Spielberg
+            tr
+              td Se7en
+              td R
+              td 2h 7min
+              td Crime, Drama, Mystery
+              td 22 September 1995
+              td David Fincher
+
+    p
+      | Add the #[code table-scroll] class to #{'<table>'} to have a horizontally scrollable table.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <table class="table table-striped table-scroll">
+            ...
+          </table>
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file