feat(tables): it replicates the responsive tables from bootstrap

nostalgic-css · Dec 11, 2018 · 02cd484 · 02cd484
1 parent 8acab18
commit 02cd484
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 1 deletion.
diff --git 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
@@ -1,3 +1,8 @@
+.nes-table-responsive {
+  @media (max-width: 768px) {
+    overflow-x: scroll;
+  }
+}
 .nes-table {
   table-layout: fixed;
   background-color: $background-color;