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 1/3] 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 efe01fd..d9f0bd6 100644
--- a/index.html
+++ b/index.html
@@ -152,40 +152,72 @@
 
     <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 fd35802..f3e7d32 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;

From 934ea6c2da7ce5f31f9bff8dc829cd8d1a55da16 Mon Sep 17 00:00:00 2001
From: Wako <dulo.rodrigo@gmail.com>
Date: Tue, 11 Dec 2018 22:25:36 -0600
Subject: [PATCH 2/3] feat(tables): it removes the media query and edit text in
 html

---
 index.html                | 32 +++++++-------------------------
 scss/elements/tables.scss |  6 +++---
 2 files changed, 10 insertions(+), 28 deletions(-)

diff --git a/index.html b/index.html
index d9f0bd6..2983ad4 100644
--- a/index.html
+++ b/index.html
@@ -160,29 +160,20 @@
               <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>
+              <td>Thou hast had a good evening</td>
+              <td>Thou hast had a good night</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>
+              <td>Thou hast had a good evening</td>
+              <td>Thou hast had a good night</td>
             </tr>
           </tbody>
         </table>
@@ -195,29 +186,20 @@
               <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>
+              <td>Thou hast had a good afternon</td>
+              <td>Thou hast had a good evening</td>
+              <td>Thou hast had a good night</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 f3e7d32..2e9a94e 100644
--- a/scss/elements/tables.scss
+++ b/scss/elements/tables.scss
@@ -1,7 +1,7 @@
 .nes-table-responsive {
-  @media (max-width: 768px) {
-    overflow-x: scroll;
-  }
+  max-width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
 }
 .nes-table {
   table-layout: fixed;

From 1be8016a710452d85acaa60439c71328bfe9e047 Mon Sep 17 00:00:00 2001
From: Wako <dulo.rodrigo@gmail.com>
Date: Sun, 16 Dec 2018 15:19:11 -0600
Subject: [PATCH 3/3] fix(table): removes code

---
 style.css | 18 ------------------
 1 file changed, 18 deletions(-)

diff --git a/style.css b/style.css
index 7ad5f23..498e264 100644
--- a/style.css
+++ b/style.css
@@ -16,20 +16,6 @@ div.containers > .nes-container {
   max-width: 400px;
 }
 
-div.tables {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-div.tables > .nes-table {
-  min-width: 350px;
-  max-width: calc(50% - 2rem);
-}
-div.tables > .nes-table:first-child {
-  margin-right: 2rem;
-  margin-bottom: 2rem;
-}
-
 .balloon.nes-container .nes-balloon {
   max-width: 600px;
   margin: 2rem 2rem;
@@ -92,10 +78,6 @@ div.tables > .nes-table:first-child {
     padding: 0;
     margin: 2rem 0.2rem;
   }
-  div.tables > .nes-table {
-    max-width: 100%;
-    margin-right: 0;
-  }
   .balloon.nes-container .nes-balloon {
     max-width: 70%;
   }