Merge pull request #520 from picturepan2/0.5.4 v0.5.4

0.5.4

1 files changed, 58 insertions, 2 deletions

diff --git a/docs/elements.html b/docs/elements.html
index babb472..810f416 100644
--- a/docs/elements.html
+++ b/docs/elements.html
@@ -56,7 +56,7 @@
               <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
               <div class="accordion-body">
                 <ul class="menu menu-nav">
-                  <li class="menu-item"><a href="layout.html#flexbox">Flexbox grid</a></li>
+                  <li class="menu-item"><a href="layout.html#grid">Flexbox grid</a></li>
                   <li class="menu-item"><a href="layout.html#responsive">Responsive</a></li>
                   <li class="menu-item"><a href="layout.html#navbar">Navbar</a></li>
                 </ul>
@@ -394,6 +394,62 @@
       <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>14 October 1994<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
     <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
   <span class="hljs-tag">&lt;/<span class="hljs-name">tbody</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">table</span>&gt;</span>
+
+</code></pre>
+            <div class="docs-demo columns">
+              <div class="column col-12">
+                <table class="table table-striped table-scroll">
+                  <thead>
+                    <tr>
+                      <th>Name</th>
+                      <th>Rating</th>
+                      <th>Duration</th>
+                      <th>Genre</th>
+                      <th>Release date</th>
+                      <th>Director</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>The Shawshank Redemption</td>
+                      <td>R</td>
+                      <td>2h 22min</td>
+                      <td>Crime, Drama</td>
+                      <td>14 October 1994</td>
+                      <td>Frank Darabont</td>
+                    </tr>
+                    <tr>
+                      <td>The Godfather</td>
+                      <td>R</td>
+                      <td>2h 55min</td>
+                      <td>Crime, Drama</td>
+                      <td>24 March 1972</td>
+                      <td>Francis Ford Coppola</td>
+                    </tr>
+                    <tr>
+                      <td>Schindler's List</td>
+                      <td>R</td>
+                      <td>3h 15min</td>
+                      <td>Biography, Drama, History</td>
+                      <td>4 February 1994</td>
+                      <td>Steven Spielberg</td>
+                    </tr>
+                    <tr>
+                      <td>Se7en</td>
+                      <td>R</td>
+                      <td>2h 7min</td>
+                      <td>Crime, Drama, Mystery</td>
+                      <td>22 September 1995</td>
+                      <td>David Fincher</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+            <p>Add the <code>table-scroll</code> class to &lt;table&gt; to have a horizontally scrollable table.</p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">table</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"table table-striped table-scroll"</span>&gt;</span>
+  ...
 <span class="hljs-tag">&lt;/<span class="hljs-name">table</span>&gt;</span></code></pre>
           </div>
           <div class="container" id="buttons">
@@ -1500,7 +1556,7 @@
             <p>Code is used for styling inline and multiline code snippets.</p>
             <p>For inline code, you can use the &lt;code&gt; element. 
               For multiline code snippet blocks, you can use &lt;pre&gt; with the <code>code</code> class as a container, and add &lt;code&gt; inside it.
-              The <code>data-lang</code> ibute is rendered as the language name in the top right.
+              The <code>data-lang</code> attribute is rendered as the language name in the top right.
             </p>
             <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- code snippets --&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span>&gt;</span>