_tables.scss in sass-twitter-bootstrap-2.0.1

- old
+ new

@@ -1,17 +1,16 @@
 //
-// Tables
+// Tables.scss
 // Tables for, you guessed it, tabular data
 // ----------------------------------------
 
 
 // BASE TABLES
 // -----------------
 
 table {
   max-width: 100%;
-  background-color: $tableBackground;
   border-collapse: collapse;
   border-spacing: 0;
 }
 
 // BASELINE STYLES
@@ -25,31 +24,27 @@
   td {
     padding: 8px;
     line-height: $baseLineHeight;
     text-align: left;
     vertical-align: top;
-    border-top: 1px solid $tableBorder;
+    border-top: 1px solid #ddd;
   }
   th {
     font-weight: bold;
   }
   // Bottom align for column headings
   thead th {
     vertical-align: bottom;
   }
   // Remove top border from thead by default
-  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 {
+  thead:first-child tr th,
+  thead:first-child tr td {
     border-top: 0;
   }
   // Account for multiple tbody instances
   tbody + tbody {
-    border-top: 2px solid $tableBorder;
+    border-top: 2px solid #ddd;
   }
 }
 
 
 
@@ -66,57 +61,43 @@
 
 // BORDERED VERSION
 // ----------------
 
 .table-bordered {
-  border: 1px solid $tableBorder;
+  border: 1px solid #ddd;
   border-collapse: separate; // Done so we can round those corners!
   *border-collapse: collapsed; // IE7 can't round corners anyway
-  border-left: 0;
   @include border-radius(4px);
-  th,
-  td {
-    border-left: 1px solid $tableBorder;
+  th + th,
+  td + td,
+  th + td,
+  td + th {
+    border-left: 1px solid #ddd;
   }
   // Prevent a double border
-  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;
   }
   // For first th or td in the first row in the first thead or tbody
   thead:first-child tr:first-child th:first-child,
   tbody:first-child tr:first-child td:first-child {
-    -webkit-border-top-left-radius: 4px;
-            border-top-left-radius: 4px;
-        -moz-border-radius-topleft: 4px;
+    @include border-radius(4px 0 0 0);
   }
   thead:first-child tr:first-child th:last-child,
   tbody:first-child tr:first-child td:last-child {
-    -webkit-border-top-right-radius: 4px;
-            border-top-right-radius: 4px;
-        -moz-border-radius-topright: 4px;
+    @include border-radius(0 4px 0 0);
   }
   // For first th or td in the first row in the first thead or tbody
   thead:last-child tr:last-child th:first-child,
   tbody:last-child tr:last-child td:first-child {
     @include border-radius(0 0 0 4px);
-    -webkit-border-bottom-left-radius: 4px;
-            border-bottom-left-radius: 4px;
-        -moz-border-radius-bottomleft: 4px;
   }
   thead:last-child tr:last-child th:last-child,
   tbody:last-child tr:last-child td:last-child {
-    -webkit-border-bottom-right-radius: 4px;
-            border-bottom-right-radius: 4px;
-        -moz-border-radius-bottomright: 4px;
+    @include border-radius(0 0 4px 0);
   }
 }
 
 
 // ZEBRA-STRIPING
@@ -125,11 +106,11 @@
 // Default zebra-stripe styles (alternating gray and transparent backgrounds)
 .table-striped {
   tbody {
     tr:nth-child(odd) td,
     tr:nth-child(odd) th {
-      background-color: $tableBackgroundAccent;
+      background-color: #f9f9f9;
     }
   }
 }
 
 
@@ -137,19 +118,33 @@
 // ------------
 // Placed here since it has to come after the potential zebra striping
 .table {
   tbody tr:hover td,
   tbody tr:hover th {
-    background-color: $tableBackgroundHover;
+    background-color: #f5f5f5;
   }
 }
 
 
 // TABLE CELL SIZING
 // -----------------
 
 // Change the columns
+@mixin tableColumns($columnSpan: 1) {
+  float: none;
+  width: (($gridColumnWidth) * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1)) - 16;
+  margin-left: 0;
+}
 table {
-  @for $i from 1 through 24 {
-    .span#{$i} { @include tableColumns($i); }
-  }
+  .span1     { @include tableColumns(1); }
+  .span2     { @include tableColumns(2); }
+  .span3     { @include tableColumns(3); }
+  .span4     { @include tableColumns(4); }
+  .span5     { @include tableColumns(5); }
+  .span6     { @include tableColumns(6); }
+  .span7     { @include tableColumns(7); }
+  .span8     { @include tableColumns(8); }
+  .span9     { @include tableColumns(9); }
+  .span10    { @include tableColumns(10); }
+  .span11    { @include tableColumns(11); }
+  .span12    { @include tableColumns(12); }
 }