_sass/pooleparty/_table.scss in jekyll-theme-hydejack-6.3.0 vs _sass/pooleparty/_table.scss in jekyll-theme-hydejack-6.4.0

@@ -1,26 +1,130 @@
-table {
-  margin-bottom: 1rem;
-  width: 100%;
-  width: calc(100% + 2rem);
-  margin-left: -1rem;
-  border: 1px solid $border-color;
-  border-collapse: collapse;
+// table {
+//   margin-bottom: 1rem;
+//   width: 100%;
+//   width: calc(100% + 2rem);
+//   margin-left: -1rem;
+//   border: 1px solid $border-color;
+//   border-collapse: collapse;
+//   border-spacing: 0;
+// }
+//
+// td, th {
+//   padding: .25rem .5rem;
+//   border: 1px solid $border-color;
+//
+//   &:first-child {
+//     padding-left: 1rem;
+//   }
+//
+//   &:last-child {
+//     padding-right: 1rem;
+//   }
+// }
+//
+// thead + tbody,
+// tbody + tbody,
+// tfoot {
+//   border-top: 3px double $border-color;
+// }
+//
+// tbody tr:nth-child(odd) td,
+// tbody tr:nth-child(odd) th {
+//   background-color: $gray-bg;
+// }
+
+// CSS only Responsive Tables
+// http://dbushell.com/2016/03/04/css-only-responsive-tables/
+// by David Bushell
+@mixin scroll-table() {
+  display: block;
+  vertical-align: top;
+  overflow-x: auto;
+  white-space: nowrap; // optional - looks better for small cell values
+  border: none;
+  -webkit-overflow-scrolling: touch;
 }
 
-td, th {
-  padding: .25rem .5rem;
-  border: 1px solid $border-color;
+@mixin flip-table() {
+  display: flex;
+  overflow: hidden;
+  background: none;
+  border: none;
+  border-top: 1px solid $border-color;
+  border-bottom: 1px solid $border-color;
 
-  &:first-child {
-    padding-left: 1rem;
+  thead {
+    display: flex;
+    flex-shrink: 0;
+    min-width: min-content;
+    margin-right: 1px;
+
+    th {
+      padding-left: 1rem;
+    }
   }
 
-  &:last-child {
-    padding-right: 1rem;
+  tbody {
+    display: flex;
+    position: relative;
+    overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+    border-top: none;
   }
+
+  tr {
+    display: flex;
+    flex-direction: column;
+    min-width: min-content;
+    flex-shrink: 0;
+
+    td {
+      border-left: none;
+    }
+
+    &:first-child {
+      td {
+        border-left: 1px solid $border-color;
+      }
+    }
+
+    &:last-child {
+      td {
+        padding-right: 1rem;
+        border-right: 1px solid $border-color;
+      }
+    }
+  }
+
+  td, th {
+    display: block;
+    border-bottom: none;
+
+    &:first-child {
+      padding-left: .5rem;
+      border-top: none;
+    }
+
+    &:last-child {
+      padding-right: .5rem;
+    }
+  }
 }
 
-tbody tr:nth-child(odd) td,
-tbody tr:nth-child(odd) th {
-  background-color: $gray-bg;
+table.scroll-table {
+  @include scroll-table();
+}
+
+table.flip-table {
+  @include flip-table();
+}
+
+@media screen and (max-width: $break-point-4) {
+  table.scroll-table-small {
+    @include scroll-table();
+  }
+
+  table.flip-table-small {
+    @include flip-table();
+  }
 }