Base table styling (Many concepts borrowed from Bootstrap)

build/css/Ribs.css

@@ -893,3 +893,117 @@ legend span {
 .scale-with-grid {
   max-width: 100%;
   height: auto; }
+
+table {
+  max-width: 100%;
+  background: white;
+  border-collapse: collapse;
+  border-spacing: 0;
+  width: 100%;
+  margin: 10px 0px; }
+  table th,
+  table td {
+    padding: 8px;
+    line-height: 21px;
+    text-align: left;
+    vertical-align: top;
+    border-top: 1px solid #cccccc; }
+  table th {
+    font-weight: bold; }
+  table thead th {
+    vertical-align: bottom; }
+  table caption thead tr:first-child th,
+  table caption thead tr:first-child td,
+  table colgroup thead tr:first-child th,
+  table colgroup thead tr:first-child td,
+  table thead:first-child tr:first-child th,
+  table thead:first-child tr:first-child td {
+    border-top: 0; }
+  table tbody tbody {
+    border-top: 2px solid #cccccc; }
+  table table {
+    background: white; }
+
+.table-condensed th,
+.table-condensed td {
+  padding: 4px 5px; }
+
+.table-bordered {
+  border: 1px solid #cccccc;
+  border-collapse: separate;
+  *border-collapse: collapse;
+  border-left: 0;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px; }
+  .table-bordered th,
+  .table-bordered td {
+    border-left: 1px solid #cccccc; }
+  .table-bordered caption thead tr:first-child th,
+  .table-bordered caption tbody tr:first-child th,
+  .table-bordered caption tbody tr:first-child td,
+  .table-bordered colgroup thead tr:first-child th,
+  .table-bordered colgroup tbody tr:first-child th,
+  .table-bordered colgroup tbody tr:first-child td,
+  .table-bordered thead:first-child tr:first-child th,
+  .table-bordered tbody:first-child tr:first-child th,
+  .table-bordered tbody:first-child tr:first-child td {
+    border-top: 0; }
+  .table-bordered thead:first-child tr:first-child > th:first-child,
+  .table-bordered tbody:first-child tr:first-child > td:first-child,
+  .table-bordered tbody:first-child tr:first-child > th:first-child {
+    -webkit-border-top-left-radius: 3px;
+    -moz-border-radius-topleft: 3px;
+    border-top-left-radius: 3px; }
+  .table-bordered thead:first-child tr:first-child > th:last-child,
+  .table-bordered tbody:first-child tr:first-child > td:last-child,
+  .table-bordered tbody:first-child tr:first-child > th:last-child {
+    -webkit-border-top-right-radius: 3px;
+    -moz-border-radius-topright: 3px;
+    border-top-right-radius: 3px; }
+  .table-bordered thead:last-child tr:last-child > th:first-child,
+  .table-bordered tbody:last-child tr:last-child > td:first-child,
+  .table-bordered tbody:last-child tr:last-child > th:first-child,
+  .table-bordered tfoot:last-child tr:last-child > td:first-child,
+  .table-bordered tfoot:last-child tr:last-child > th:first-child {
+    -webkit-border-bottom-left-radius: 3px;
+    -moz-border-radius-bottomleft: 3px;
+    border-bottom-left-radius: 3px; }
+  .table-bordered thead:last-child tr:last-child > th:last-child,
+  .table-bordered tbody:last-child tr:last-child > td:last-child,
+  .table-bordered tbody:last-child tr:last-child > th:last-child,
+  .table-bordered tfoot:last-child tr:last-child > td:last-child,
+  .table-bordered tfoot:last-child tr:last-child > th:last-child {
+    -webkit-border-bottom-right-radius: 3px;
+    -moz-border-radius-bottomright: 3px;
+    border-bottom-right-radius: 3px; }
+  .table-bordered tfoot tbody:last-child tr:last-child td:first-child {
+    -webkit-border-bottom-left-radius: 0px;
+    -moz-border-radius-bottomleft: 0px;
+    border-bottom-left-radius: 0px; }
+  .table-bordered tfoot tbody:last-child tr:last-child td:last-child {
+    -webkit-border-bottom-right-radius: 0px;
+    -moz-border-radius-bottomright: 0px;
+    border-bottom-right-radius: 0px; }
+  .table-bordered caption thead tr:first-child th:first-child,
+  .table-bordered caption tbody tr:first-child td:first-child,
+  .table-bordered colgroup thead tr:first-child th:first-child,
+  .table-bordered colgroup tbody tr:first-child td:first-child {
+    -webkit-border-top-left-radius: 3px;
+    -moz-border-radius-topleft: 3px;
+    border-top-left-radius: 3px; }
+  .table-bordered caption + thead tr:first-child th:last-child,
+  .table-bordered caption + tbody tr:first-child td:last-child,
+  .table-bordered colgroup + thead tr:first-child th:last-child,
+  .table-bordered colgroup + tbody tr:first-child td:last-child {
+    -webkit-border-top-right-radius: 3px;
+    -moz-border-radius-topright: 3px;
+    border-top-right-radius: 3px; }
+
+.table-striped tbody > tr:nth-child(odd) > td,
+.table-striped tbody > tr:nth-child(odd) > th {
+  background-color: #efefef; }
+
+.table-hover tbody tr:hover > td,
+.table-hover tbody tr:hover > th {
+  background-color: #999999; }

src/scss/Ribs.scss

@@ -33,6 +33,7 @@ hr {
 @import "_lists";
 @import "_forms";
 @import "_images";
+@import "_tables";
 
 // Smaller than standard 960 (devices and browsers)
 @media only screen and (max-width: 959px) {}

src/scss/_tables.scss

@@ -0,0 +1,144 @@
+//
+// #Tables
+// --------------------------------------------------
+// The majority of concepts here are shamelessly borrowed from Bootstrap and amended to fit
+// https://raw.github.com/twitter/bootstrap/master/less/tables.less
+
+table {
+  max-width: 100%;
+  background: $table_background;
+  border-collapse: collapse;
+  border-spacing: 0;
+  width: 100%;
+  margin: $table_margin;
+  th,
+  td {
+    padding: $table_td_th_padding;
+    line-height: $table_td_th_line_height;
+    text-align: left;
+    vertical-align: top;
+    border-top: 1px solid $table_border_colour;
+  }
+  th {
+    font-weight: bold;
+  }
+
+  thead th {
+    vertical-align: bottom;
+  }
+
+  caption thead tr:first-child th,
+  caption thead tr:first-child td,
+  colgroup thead tr:first-child th,
+  colgroup thead tr:first-child td,
+  thead:first-child tr:first-child th,
+  thead:first-child tr:first-child td {
+    border-top: 0;
+  }
+
+  tbody tbody {
+    border-top: 2px solid $table_border_colour;
+  }
+
+  table {
+    background: $table_background;
+  }
+}
+
+.table-condensed {
+  th,
+  td {
+    padding: $table_condensed_padding;
+  }
+}
+
+.table-bordered {
+  border: 1px solid $table_border_colour;
+  border-collapse: separate;
+  *border-collapse: collapse;
+  border-left: 0;
+  @include border-radius($table_border_radius);
+  th,
+  td {
+    border-left: 1px solid $table_border_colour;
+  }
+  
+  caption thead tr:first-child th,
+  caption tbody tr:first-child th,
+  caption tbody tr:first-child td,
+  colgroup thead tr:first-child th,
+  colgroup tbody tr:first-child th,
+  colgroup tbody tr:first-child td,
+  thead:first-child tr:first-child th,
+  tbody:first-child tr:first-child th,
+  tbody:first-child tr:first-child td {
+    border-top: 0;
+  }
+  
+  thead:first-child tr:first-child > th:first-child,
+  tbody:first-child tr:first-child > td:first-child,
+  tbody:first-child tr:first-child > th:first-child {
+    @include border-top-left-radius($table_border_radius);
+  }
+
+  thead:first-child tr:first-child > th:last-child,
+  tbody:first-child tr:first-child > td:last-child,
+  tbody:first-child tr:first-child > th:last-child {
+    @include border-top-right-radius($table_border_radius);
+  }
+  
+  thead:last-child tr:last-child > th:first-child,
+  tbody:last-child tr:last-child > td:first-child,
+  tbody:last-child tr:last-child > th:first-child,
+  tfoot:last-child tr:last-child > td:first-child,
+  tfoot:last-child tr:last-child > th:first-child {
+    @include border-bottom-left-radius($table_border_radius);
+  }
+  
+  thead:last-child tr:last-child > th:last-child,
+  tbody:last-child tr:last-child > td:last-child,
+  tbody:last-child tr:last-child > th:last-child,
+  tfoot:last-child tr:last-child > td:last-child,
+  tfoot:last-child tr:last-child > th:last-child {
+    @include border-bottom-right-radius($table_border_radius);
+  }
+
+  tfoot tbody:last-child tr:last-child td:first-child {
+    @include border-bottom-left-radius(0px);
+  }
+  tfoot tbody:last-child tr:last-child td:last-child {
+    @include border-bottom-right-radius(0px);
+  }
+
+  caption thead tr:first-child th:first-child,
+  caption tbody tr:first-child td:first-child,
+  colgroup thead tr:first-child th:first-child,
+  colgroup tbody tr:first-child td:first-child {
+    @include border-top-left-radius($table_border_radius);
+  }
+  caption + thead tr:first-child th:last-child,
+  caption + tbody tr:first-child td:last-child,
+  colgroup + thead tr:first-child th:last-child,
+  colgroup + tbody tr:first-child td:last-child {
+    @include border-top-right-radius($table_border_radius);
+  }
+
+}
+
+.table-striped {
+  tbody {
+    > tr:nth-child(odd) > td,
+    > tr:nth-child(odd) > th {
+      background-color: $table_alt_colour;
+    }
+  }
+}
+
+.table-hover {
+  tbody {
+    tr:hover > td,
+    tr:hover > th {
+      background-color: $table_hover_colour;
+    }
+  }
+}

src/scss/_variables.scss

@@ -138,3 +138,14 @@ $list_item_paragraph_line_height: 21px;
 
 $fallback_hex_gradient_bg: #CCC;
 
+$table_background: #FFF;
+$table_margin: 10px 0px;
+$table_td_th_padding: 8px;
+$table_td_th_line_height: 21px;
+$table_border_colour: #CCC;
+$table_border_radius: 3px;
+$table_alt_colour: #EFEFEF;
+$table_hover_colour: #999;
+$table_condensed_padding: 4px 5px;
+
+