From b777a03857cba6322929e3f11a4bb14d0338d160 Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Wed, 14 Nov 2018 14:43:30 +0800
Subject: Update Docs examples

---
 docs/src/elements/tables.pug | 59 +++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 55 insertions(+), 4 deletions(-)

(limited to 'docs/src/elements/tables.pug')

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>
 
-- 
cgit v1.3.1-26-gb76a