Better responsive .table

cantierecreativo · Dec 11, 2014 · 447e01b · 447e01b
1 parent e1b503f
commit 447e01b
Showing 1 changed file with 14 additions and 6 deletions.
diff --git a/bemo/blocks/_table.sass b/bemo/blocks/_table.sass
@@ -1,17 +1,18 @@
 .table
   width: 100%
   table-layout: fixed
-  border: 1px solid $border-color
   background-color: white
 
-  thead
-    background-color: $light-bg-color
-    border: 1px solid $border-color
-
   td, th
     text-align: left
     +padding(1)
 
+  th
+    +heading-font-family
+    font-variant: small-caps
+    text-transform: uppercase
+    border-bottom: 1px solid $border-color
+
   tr:nth-child(2n)
     background-color: $light-bg-color
 
@@ -33,16 +34,23 @@
         left: -9999px
 
     tr
-      border-width: 0
+      display: block
+      border: 1px solid $border-color
+      +margin-bottom(1)
 
     td
       border-bottom: 1px solid $border-color
       white-space: normal
       text-align: left
 
+      &:last-child
+        border-bottom-width: 0
+
       &:before
         color: $light-body-color
         +font-size(milli)
         content: attr(data-title)
+        font-variant: small-caps
+        text-transform: uppercase
         display: block