184 Responsive table

Add a media query to fix the table behavior on mobile
2024-11-13 16:54:22 +00:00 · 2017-11-20 17:01:59 -03:00 · 2017-11-20 17:01:59 -03:00 · 533ae390f6
commit 533ae390f6
parent 3326823565
1 changed files with 40 additions and 0 deletions
--- a/src/_Table.sass
+++ b/src/_Table.sass
@ -17,3 +17,43 @@ th

 	&:last-child
 		padding-right: 0
+
+@media screen and (max-width: 40.0rem)
+  table
+    border-spacing: 0
+    display: flex
+    width: 100%
+
+    thead
+      border-right: solid .1rem $color-quinary
+
+      td,
+      th
+        padding-left: 0
+
+        &:first-child
+          padding-left: 0
+
+        &:last-child
+          padding-right: 1.2rem
+
+    tbody
+      display: flex
+      overflow-x: auto
+      white-space: nowrap
+
+      tr
+        border-right: solid .1rem $color-quinary
+
+        &:last-child
+          border-right: none
+
+    td,
+    th
+      display: block
+
+      &:first-child
+        padding-left: 1.2rem
+
+      &:last-child
+        padding-right: 1.2rem