BS3 Final

assets/less/tables.less

@@ -13,7 +13,6 @@ th {
 
 
 // Baseline styles
-// ---------------
 
 .table {
   width: 100%;
@@ -35,6 +34,7 @@ th {
   // Bottom align for column headings
   thead > tr > th {
     vertical-align: bottom;
+    border-bottom: 2px solid @table-border-color;
   }
   // Remove top border from thead by default
   caption + thead,
@@ -58,9 +58,7 @@ th {
 }
 
 
-
 // Condensed table w/ half padding
-// -------------------------------
 
 .table-condensed {
   thead,
@@ -76,9 +74,9 @@ th {
 }
 
 
-
 // Bordered version
-// ----------------
+//
+// Add borders all around the table and between all the columns.
 
 .table-bordered {
   border: 1px solid @table-border-color;
@@ -92,14 +90,21 @@ th {
       }
     }
   }
+  > thead {
+    > tr {
+      > th,
+      > td {
+        border-bottom-width: 2px;
+      }
+    }
+  }
 }
 
 
-
 // Zebra-striping
-// --------------
-
+//
 // Default zebra-stripe styles (alternating gray and transparent backgrounds)
+
 .table-striped {
   > tbody {
     > tr:nth-child(odd) {
@@ -112,11 +117,10 @@ th {
 }
 
 
-
 // Hover effect
-// ------------
-
+//
 // Placed here since it has to come after the potential zebra striping
+
 .table-hover {
   > tbody {
     > tr:hover {
@@ -129,19 +133,18 @@ th {
 }
 
 
-
 // Table cell sizing
-// -----------------
-
+//
 // Reset default table behavior
-table col[class^="col-"] {
+
+table col[class*="col-"] {
   float: none;
   display: table-column;
 }
 table {
   td,
   th {
-    &[class^="col-"] {
+    &[class*="col-"] {
       float: none;
       display: table-cell;
     }
@@ -149,9 +152,8 @@ table {
 }
 
 
-
 // Table backgrounds
-// -----------------
+//
 // Exact selectors below required to override `.table-striped` and prevent
 // inheritance to nested tables.
 
@@ -164,48 +166,71 @@ table {
   &.active > th  {
     background-color: @table-bg-active;
   }
-  > td.success,
-  > th.success,
-  &.success > td,
-  &.success > th {
-    background-color: @state-success-bg;
-    border-color: @state-success-border;
-  }
-  > td.danger,
-  > th.danger,
-  &.danger > td,
-  &.danger > th {
-    background-color: @state-danger-bg;
-    border-color: @state-danger-border;
-  }
-  > td.warning,
-  > th.warning,
-  &.warning > td,
-  &.warning > th {
-    background-color: @state-warning-bg;
-    border-color: @state-warning-border;
-  }
 }
 
-// Hover states for `.table-hover`
-// Note: this is not available for cells or rows within `thead` or `tfoot`.
-.table-hover > tbody > tr {
-  > td.success:hover,
-  > th.success:hover,
-  &.success:hover > td {
-    background-color: darken(@state-success-bg, 5%);
-    border-color: darken(@state-success-border, 5%);
-  }
-  > td.danger:hover,
-  > th.danger:hover,
-  &.danger:hover > td {
-    background-color: darken(@state-danger-bg, 5%);
-    border-color: darken(@state-danger-border, 5%);
-  }
-  > td.warning:hover,
-  > th.warning:hover,
-  &.warning:hover > td {
-    background-color: darken(@state-warning-bg, 5%);
-    border-color: darken(@state-warning-border, 5%);
+// Generate the contextual variants
+.table-row-variant(success; @state-success-bg; @state-success-border);
+.table-row-variant(danger; @state-danger-bg; @state-danger-border);
+.table-row-variant(warning; @state-warning-bg; @state-warning-border);
+
+
+// Responsive tables
+//
+// Wrap your tables in `.table-scrollable` and we'll make them mobile friendly
+// by enabling horizontal scrolling. Only applies <768px. Everything above that
+// will display normally.
+
+@media (max-width: @screen-sm) {
+  .table-responsive {
+    width: 100%;
+    margin-bottom: 15px;
+    overflow-y: hidden;
+    overflow-x: scroll;
+    border: 1px solid @table-border-color;
+
+    // Tighten up spacing and give a background color
+    > .table {
+      margin-bottom: 0;
+      background-color: #fff;
+
+      // Ensure the content doesn't wrap
+      > thead,
+      > tbody,
+      > tfoot {
+        > tr {
+          > th,
+          > td {
+            white-space: nowrap;
+          }
+        }
+      }
+    }
+
+    // Special overrides for the bordered tables
+    > .table-bordered {
+      border: 0;
+
+      // Nuke the appropriate borders so that the parent can handle them
+      > thead,
+      > tbody,
+      > tfoot {
+        > tr {
+          > th:first-child,
+          > td:first-child {
+            border-left: 0;
+          }
+          > th:last-child,
+          > td:last-child {
+            border-right: 0;
+          }
+        }
+        > tr:last-child {
+          > th,
+          > td {
+            border-bottom: 0;
+          }
+        }
+      }
+    }
   }
 }