Make tables more responsive

assets/sass/_table.sass

@@ -1,4 +1,5 @@
 @import variables
+@import mixins
 
 table
   width: 100%
@@ -6,106 +7,48 @@ table
   border-spacing: 0
   margin-bottom: 20px
 
-th
-  border: 1px solid #eee
-  padding: 0.5em 3px
-
-td
-  border: 1px solid #eee
-  padding: 0.5em 3px
-  vertical-align: top
-
-th
-  background: bg-color('primary')
-  text-align: left
-
-td li
-  margin-left: 20px
-
-.table-small
-  font-size: size('small')
-
-th a
-  text-decoration: none
-  color: color('primary')
-  &:focus, &:hover
-    text-decoration: underline
-
-.table-fixed
-  table-layout: fixed
-  white-space: nowrap
-  th
-    overflow: hidden
-  td
+  &.table-fixed
+    table-layout: fixed
     white-space: nowrap
-    overflow: hidden
-    text-overflow: ellipsis
+    th
+      overflow: hidden
+    td
+      white-space: nowrap
+      overflow: hidden
+      text-overflow: ellipsis
 
-.table-stripped tr:nth-child(odd)
-  background: #fefefe
+  &.table-small
+    font-size: size('small')
 
-.column-3
-  width: 3%
+  &.table-striped tr:nth-child(odd)
+    background: bg-color('lighter')
 
-.column-5
-  width: 5%
+  &.table-scrolling
+    @include sm-device
+      overflow-x: auto
+      display: inline-block
+      vertical-align: top
+      max-width: 100%
+      white-space: nowrap
 
-.column-8
-  width: 7.5%
+  th
+    text-align: left
+    padding: 0.5em 3px
+    border: 1px solid #eee
+    background: bg-color('primary')
 
-.column-10
-  width: 10%
+    a
+      text-decoration: none
+      color: color('primary')
+      &:focus, &:hover
+        text-decoration: underline
 
-.column-12
-  width: 12%
-
-.column-15
-  width: 15%
-
-.column-18
-  width: 18%
-
-.column-20
-  width: 20%
-
-.column-25
-  width: 25%
-
-.column-30
-  width: 30%
-
-.column-35
-  width: 35%
-
-.column-40
-  width: 40%
-
-.column-50
-  width: 50%
-
-.column-60
-  width: 60%
-
-.column-70, .column-80
-  width: 70%
-
-.draggable-row-handle
-  cursor: move
-  color: #dedede
-  &:hover
-    color: color('primary')
-
-tr.draggable-item-selected
-  background: #fff
-  border: 2px solid #666
-  box-shadow: 4px 2px 10px -4px rgba(0, 0, 0, 0.55)
   td
-    border-top: none
-    border-bottom: none
-    &:first-child
-      border-left: none
-    &:last-child
-      border-right: none
+    border: 1px solid #eee
+    padding: 0.5em 3px
+    vertical-align: top
 
-.table-stripped tr.draggable-item-hover, tr.draggable-item-hover
-  background: #FEFFF2
+    li
+      margin-left: 20px
+
+@include col-x(100)