Add Table with horizontal scroll support #333

1 files changed, 57 insertions, 0 deletions

diff --git a/docs/elements.html b/docs/elements.html
index 8ffabdc..8935483 100644
--- a/docs/elements.html
+++ b/docs/elements.html
@@ -602,6 +602,63 @@
 &lt;<span class="tag">/table</span>&gt;
 </code></pre>
 
+        <div class="docs-note">
+          <p>If you need the tables with horizontal scroll, add the <code>table-scroll</code> class to the &lt;table&gt; element. </p>
+        </div>
+
+        <table class="table table-scroll">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Genre</th>
+              <th>Director</th>
+              <th>Rating</th>
+              <th>Duration</th>
+              <th>Release date</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>The Shawshank Redemption</td>
+              <td>Crime, Drama</td>
+              <td>Frank Darabont</td>
+              <td>R</td>
+              <td>2h 22min</td>
+              <td>14 October 1994</td>
+            </tr>
+            <tr>
+              <td>The Godfather</td>
+              <td>Crime, Drama</td>
+              <td>Francis Ford Coppola</td>
+              <td>R</td>
+              <td>2h 55min</td>
+              <td>24 March 1972</td>
+            </tr>
+            <tr>
+              <td>Schindler's List</td>
+              <td>Biography, Drama, History</td>
+              <td>Steven Spielberg</td>
+              <td>R</td>
+              <td>3h 15min</td>
+              <td>4 February 1994</td>
+            </tr>
+            <tr>
+              <td>Se7en</td>
+              <td>Crime, Drama, Mystery</td>
+              <td>David Fincher</td>
+              <td>R</td>
+              <td>2h 7min</td>
+              <td>22 September 1995</td>
+            </tr>
+          </tbody>
+        </table>
+
+<!-- tables -->
+<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">table</span> <span class="atn">class</span>=<span class="atv">&quot;table table-scroll&quot;</span>&gt;
+  <span class="com">&lt;!-- table content --&gt;</span>
+&lt;<span class="tag">/table</span>&gt;
+</code></pre>
+
       </div>
 
       <div id="buttons" class="container">