From 02cd4844ca7ba24035b5871972d1a46316b8b69d Mon Sep 17 00:00:00 2001
From: Wako <dulo.rodrigo@gmail.com>
Date: Mon, 10 Dec 2018 23:40:43 -0600
Subject: [PATCH] feat(tables): it replicates the responsive tables from
 bootstrap

---
 index.html                | 34 +++++++++++++++++++++++++++++++++-
 scss/elements/tables.scss |  5 +++++
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index efe01fd1..d9f0bd60 100644
--- a/index.html
+++ b/index.html
@@ -152,40 +152,72 @@ <h2 class="title">Balloons</h2>
 
     <section class="nes-container with-title">
       <h2 class="title">Table</h2>
-      <div class="tables">
+      <div class="nes-table-responsive">
         <table class="nes-table is-bordered is-centered">
           <thead>
             <tr>
               <th>Table.is-bordered</th>
               <th>Table.is-centered</th>
+              <th>Table.is-centered</th>
+              <th>Table.is-centered</th>
+              <th>Table.is-centered</th>
+              <th>Table.is-centered</th>
+              <th>Table.is-centered</th>
             </tr>
           </thead>
           <tbody>
             <tr>
               <td>Thou hast had a good morning</td>
               <td>Thou hast had a good afternoon</td>
+              <td>Thou hast had a good afternoon</td>
+              <td>Thou hast had a good afternoon</td>
+              <td>Thou hast had a good afternoon</td>
+              <td>Thou hast had a good afternoon</td>
+              <td>Thou hast had a good afternoon</td>
             </tr>
             <tr>
               <td>Thou hast had a good morning</td>
               <td>Thou hast had a good afternoon</td>
+              <td>Thou hast had a good afternoon</td>
+              <td>Thou hast had a good afternoon</td>
+              <td>Thou hast had a good afternoon</td>
+              <td>Thou hast had a good afternoon</td>
+              <td>Thou hast had a good afternoon</td>
             </tr>
           </tbody>
         </table>
+      </div>
+      <div class="nes-table-responsive">
         <table class="nes-table is-bordered is-dark">
           <thead>
             <tr>
               <th>Table.is-dark</th>
               <th>Table.is-bordered</th>
+              <th>Table.is-bordered</th>
+              <th>Table.is-bordered</th>
+              <th>Table.is-bordered</th>
+              <th>Table.is-bordered</th>
+              <th>Table.is-bordered</th>
             </tr>
           </thead>
           <tbody>
             <tr>
               <td>Thou hast had a good morning</td>
               <td>Thou hast had a good morning</td>
+              <td>Thou hast had a good morning</td>
+              <td>Thou hast had a good morning</td>
+              <td>Thou hast had a good morning</td>
+              <td>Thou hast had a good morning</td>
+              <td>Thou hast had a good morning</td>
             </tr>
             <tr>
               <td>Thou hast had a good morning</td>
               <td>Thou hast had a good afternoon</td>
+              <td>Thou hast had a good afternoon</td>
+              <td>Thou hast had a good afternoon</td>
+              <td>Thou hast had a good afternoon</td>
+              <td>Thou hast had a good afternoon</td>
+              <td>Thou hast had a good afternoon</td>
             </tr>
           </tbody>
         </table>
diff --git a/scss/elements/tables.scss b/scss/elements/tables.scss
index fd358028..f3e7d326 100644
--- a/scss/elements/tables.scss
+++ b/scss/elements/tables.scss
@@ -1,3 +1,8 @@
+.nes-table-responsive {
+  @media (max-width: 768px) {
+    overflow-x: scroll;
+  }
+}
 .nes-table {
   table-layout: fixed;
   background-color: $background-color;