overhaul the table styles and update those everywhere in the docs, update the...

overhaul the table styles and update those everywhere in the docs, update the button docs, spec out the forms docs

bootstrap.css

@@ -6,7 +6,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Sun Oct 30 20:12:53 PDT 2011
+ * Date: Mon Oct 31 19:36:50 PDT 2011
  */
 /* Reset.less
  * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
@@ -927,17 +927,10 @@ textarea[readonly] {
  * ---------------------------------------- */
 table {
   width: 100%;
-  margin-bottom: 18px;
   padding: 0;
-  border-collapse: separate;
-  *border-collapse: collapse;
-  /* IE7, collapse table to remove spacing */
-
+  margin-bottom: 18px;
   font-size: 13px;
-  border: 1px solid #ddd;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
+  border-collapse: collapse;
 }
 table th, table td {
   padding: 10px 10px 9px;
@@ -948,47 +941,109 @@ table th {
   padding-top: 9px;
   font-weight: bold;
   vertical-align: middle;
-  border-bottom: 1px solid #ddd;
 }
 table td {
   vertical-align: top;
+  border-top: 1px solid #ddd;
 }
-table th + th, table td + td {
-  border-left: 1px solid #ddd;
-}
-table tr + tr td {
+table tbody th {
   border-top: 1px solid #ddd;
+  vertical-align: top;
+}
+.condensed-table th, .condensed-table td {
+  padding: 5px 5px 4px;
+}
+.bordered-table {
+  border: 1px solid #ddd;
+  border-collapse: separate;
+  *border-collapse: collapse;
+  /* IE7, collapse table to remove spacing */
+
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
 }
-table tbody tr:first-child td:first-child {
+.bordered-table th + th, .bordered-table td + td, .bordered-table th + td {
+  border-left: 1px solid #ddd;
+}
+.bordered-table thead:first-child tr:first-child th:first-child, .bordered-table tbody:first-child tr:first-child td:first-child {
   -webkit-border-radius: 4px 0 0 0;
   -moz-border-radius: 4px 0 0 0;
   border-radius: 4px 0 0 0;
 }
-table tbody tr:first-child td:last-child {
+.bordered-table thead:first-child tr:first-child th:last-child, .bordered-table tbody:first-child tr:first-child td:last-child {
   -webkit-border-radius: 0 4px 0 0;
   -moz-border-radius: 0 4px 0 0;
   border-radius: 0 4px 0 0;
 }
-table tbody tr:last-child td:first-child {
+.bordered-table tbody tr:last-child td:first-child {
   -webkit-border-radius: 0 0 0 4px;
   -moz-border-radius: 0 0 0 4px;
   border-radius: 0 0 0 4px;
 }
-table tbody tr:last-child td:last-child {
+.bordered-table tbody tr:last-child td:last-child {
   -webkit-border-radius: 0 0 4px 0;
   -moz-border-radius: 0 0 4px 0;
   border-radius: 0 0 4px 0;
 }
-.zebra-striped tbody tr:nth-child(odd) td {
+table .span1 {
+  width: 40px;
+}
+table .span2 {
+  width: 120px;
+}
+table .span3 {
+  width: 200px;
+}
+table .span4 {
+  width: 280px;
+}
+table .span5 {
+  width: 360px;
+}
+table .span6 {
+  width: 440px;
+}
+table .span7 {
+  width: 520px;
+}
+table .span8 {
+  width: 600px;
+}
+table .span9 {
+  width: 680px;
+}
+table .span10 {
+  width: 760px;
+}
+table .span11 {
+  width: 840px;
+}
+table .span12 {
+  width: 920px;
+}
+table .span13 {
+  width: 1000px;
+}
+table .span14 {
+  width: 1080px;
+}
+table .span15 {
+  width: 1160px;
+}
+table .span16 {
+  width: 1240px;
+}
+.striped-table tbody tr:nth-child(odd) td, .striped-table tbody tr:nth-child(odd) th {
   background-color: #f9f9f9;
 }
-.zebra-striped tbody tr:hover td {
+.striped-table tbody tr:hover td, .striped-table tbody tr:hover th {
   background-color: #f5f5f5;
 }
-.zebra-striped .header {
+table .header {
   cursor: pointer;
 }
-.zebra-striped .header:after {
+table .header:after {
   content: "";
   float: right;
   margin-top: 7px;
@@ -997,21 +1052,21 @@ table tbody tr:last-child td:last-child {
   border-color: #000 transparent;
   visibility: hidden;
 }
-.zebra-striped .headerSortUp, .zebra-striped .headerSortDown {
+table .headerSortUp, table .headerSortDown {
   background-color: rgba(141, 192, 219, 0.25);
   text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
 }
-.zebra-striped .header:hover:after {
+table .header:hover:after {
   visibility: visible;
 }
-.zebra-striped .headerSortDown:after, .zebra-striped .headerSortDown:hover:after {
+table .headerSortDown:after, table .headerSortDown:hover:after {
   visibility: visible;
   filter: alpha(opacity=60);
   -khtml-opacity: 0.6;
   -moz-opacity: 0.6;
   opacity: 0.6;
 }
-.zebra-striped .headerSortUp:after {
+table .headerSortUp:after {
   border-bottom: none;
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;

bootstrap.min.css

@@ -154,22 +154,39 @@ input[disabled],select[disabled],textarea[disabled],input[readonly],select[reado
 .form-horizontal .controls{margin-left:150px;}
 .form-horizontal .control-list{padding-top:6px;}
 .form-horizontal .form-actions{padding-left:150px;}
-table{width:100%;margin-bottom:18px;padding:0;border-collapse:separate;*border-collapse:collapse;font-size:13px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}table th,table td{padding:10px 10px 9px;line-height:18px;text-align:left;}
-table th{padding-top:9px;font-weight:bold;vertical-align:middle;border-bottom:1px solid #ddd;}
-table td{vertical-align:top;}
-table th+th,table td+td{border-left:1px solid #ddd;}
-table tr+tr td{border-top:1px solid #ddd;}
-table tbody tr:first-child td:first-child{-webkit-border-radius:4px 0 0 0;-moz-border-radius:4px 0 0 0;border-radius:4px 0 0 0;}
-table tbody tr:first-child td:last-child{-webkit-border-radius:0 4px 0 0;-moz-border-radius:0 4px 0 0;border-radius:0 4px 0 0;}
-table tbody tr:last-child td:first-child{-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px;}
-table tbody tr:last-child td:last-child{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;}
-.zebra-striped tbody tr:nth-child(odd) td{background-color:#f9f9f9;}
-.zebra-striped tbody tr:hover td{background-color:#f5f5f5;}
-.zebra-striped .header{cursor:pointer;}.zebra-striped .header:after{content:"";float:right;margin-top:7px;border-width:0 4px 4px;border-style:solid;border-color:#000 transparent;visibility:hidden;}
-.zebra-striped .headerSortUp,.zebra-striped .headerSortDown{background-color:rgba(141, 192, 219, 0.25);text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);}
-.zebra-striped .header:hover:after{visibility:visible;}
-.zebra-striped .headerSortDown:after,.zebra-striped .headerSortDown:hover:after{visibility:visible;filter:alpha(opacity=60);-khtml-opacity:0.6;-moz-opacity:0.6;opacity:0.6;}
-.zebra-striped .headerSortUp:after{border-bottom:none;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #000;visibility:visible;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;filter:alpha(opacity=60);-khtml-opacity:0.6;-moz-opacity:0.6;opacity:0.6;}
+table{width:100%;padding:0;margin-bottom:18px;font-size:13px;border-collapse:collapse;}table th,table td{padding:10px 10px 9px;line-height:18px;text-align:left;}
+table th{padding-top:9px;font-weight:bold;vertical-align:middle;}
+table td{vertical-align:top;border-top:1px solid #ddd;}
+table tbody th{border-top:1px solid #ddd;vertical-align:top;}
+.condensed-table th,.condensed-table td{padding:5px 5px 4px;}
+.bordered-table{border:1px solid #ddd;border-collapse:separate;*border-collapse:collapse;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.bordered-table th+th,.bordered-table td+td,.bordered-table th+td{border-left:1px solid #ddd;}
+.bordered-table thead:first-child tr:first-child th:first-child,.bordered-table tbody:first-child tr:first-child td:first-child{-webkit-border-radius:4px 0 0 0;-moz-border-radius:4px 0 0 0;border-radius:4px 0 0 0;}
+.bordered-table thead:first-child tr:first-child th:last-child,.bordered-table tbody:first-child tr:first-child td:last-child{-webkit-border-radius:0 4px 0 0;-moz-border-radius:0 4px 0 0;border-radius:0 4px 0 0;}
+.bordered-table tbody tr:last-child td:first-child{-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px;}
+.bordered-table tbody tr:last-child td:last-child{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;}
+table .span1{width:40px;}
+table .span2{width:120px;}
+table .span3{width:200px;}
+table .span4{width:280px;}
+table .span5{width:360px;}
+table .span6{width:440px;}
+table .span7{width:520px;}
+table .span8{width:600px;}
+table .span9{width:680px;}
+table .span10{width:760px;}
+table .span11{width:840px;}
+table .span12{width:920px;}
+table .span13{width:1000px;}
+table .span14{width:1080px;}
+table .span15{width:1160px;}
+table .span16{width:1240px;}
+.striped-table tbody tr:nth-child(odd) td,.striped-table tbody tr:nth-child(odd) th{background-color:#f9f9f9;}
+.striped-table tbody tr:hover td,.striped-table tbody tr:hover th{background-color:#f5f5f5;}
+table .header{cursor:pointer;}table .header:after{content:"";float:right;margin-top:7px;border-width:0 4px 4px;border-style:solid;border-color:#000 transparent;visibility:hidden;}
+table .headerSortUp,table .headerSortDown{background-color:rgba(141, 192, 219, 0.25);text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);}
+table .header:hover:after{visibility:visible;}
+table .headerSortDown:after,table .headerSortDown:hover:after{visibility:visible;filter:alpha(opacity=60);-khtml-opacity:0.6;-moz-opacity:0.6;opacity:0.6;}
+table .headerSortUp:after{border-bottom:none;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #000;visibility:visible;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;filter:alpha(opacity=60);-khtml-opacity:0.6;-moz-opacity:0.6;opacity:0.6;}
 table .blue{color:#049cdb;border-bottom-color:#049cdb;}
 table .headerSortUp.blue,table .headerSortDown.blue{background-color:#ade6fe;}
 table .green{color:#46a546;border-bottom-color:#46a546;}

docs/javascript.html

@@ -88,7 +88,7 @@
      <div class="span9">
       <h3>What's included</h3>
        <p>Bring some of Bootstrap's primary components to life with new custom plugins that work with <a href="http://jquery.com/" target="_blank">jQuery</a> and <a href="http://ender.no.de" target="_blank">Ender</a>. We encourage you to extend and modify them to fit your specific development needs.</p>
-       <table class="zebra-striped">
+       <table class="striped-table">
          <thead>
            <tr>
              <th style="width: 150px;">File</th>
@@ -151,7 +151,7 @@
           <h3>Using bootstrap-modal</h3>
           <pre class="prettyprint linenums">$('#my-modal').modal(options)</pre>
           <h3>Options</h3>
-          <table class="zebra-striped">
+          <table class="striped-table">
             <thead>
              <tr>
                <th style="width: 100px;">Name</th>
@@ -209,7 +209,7 @@ $('#my-modal').modal({
           <p><span class="label notice">Notice</span> Alternatively, this can be retrieved with <code>$().data('modal')</code>.</p>
           <h3>Events</h3>
           <p>Bootstrap's modal class exposes a few events for hooking into modal functionality. </p>
-          <table class="zebra-striped">
+          <table class="striped-table">
             <thead>
              <tr>
                <th style="width: 150px;">Event</th>
@@ -457,7 +457,7 @@ $('#my-modal').bind('hidden', function () {
           <h3>Using bootstrap-twipsy.js</h3>
           <pre class="prettyprint linenums">$('#example').twipsy(options)</pre>
           <h3>Options</h3>
-          <table class="zebra-striped">
+          <table class="striped-table">
             <thead>
              <tr>
                <th style="width: 100px;">Name</th>
@@ -574,7 +574,7 @@ $('#my-modal').bind('hidden', function () {
           <h3>Using boostrap-popover.js</h3>
           <pre class="prettyprint linenums">$('#example').popover(options)</pre>
           <h3>Options</h3>
-          <table class="zebra-striped">
+          <table class="striped-table">
             <thead>
              <tr>
                <th style="width: 100px;">Name</th>

docs/less.html

@@ -166,7 +166,7 @@
     <h2 id="compiling">Compiling Less</h2>
     <p>After modifying the <code>.less</code> files in /lib/, you'll need to recompile them in order to regenerate the bootstrap-*.*.*.css and bootstrap-*.*.*.min.css files. If you're submitting a pull request to GitHub, you must always recompile.</p>
     <h3>Ways to compile</h3>
-    <table class="zebra-striped">
+    <table class="striped-table">
       <thead>
         <tr>
           <th style="width: 120px;">Method</th>

docs/scaffolding.html

@@ -161,7 +161,7 @@
   </div>
 
   <h2>Grid customization</h2>
-  <table class="zebra-striped">
+  <table class="striped-table">
     <thead>
       <tr>
         <th>Variable</th>
@@ -273,7 +273,7 @@
     <div class="span8">
       <h2>Supported devices</h2>
       <p>Bootstrap supports a handful of media queries to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:</p>
-      <table class="zebra-striped">
+      <table class="striped-table">
         <thead>
           <tr>
             <th>Label</th>

lib/tables.less

@@ -9,14 +9,12 @@
 
 table {
   width: 100%;
-  margin-bottom: @baseLineHeight;
   padding: 0;
-  border-collapse: separate; // Done so we can round those corners!
-  *border-collapse: collapse; /* IE7, collapse table to remove spacing */
+  margin-bottom: @baseLineHeight;
   font-size: @baseFontSize;
-  border: 1px solid #ddd;
-  .border-radius(4px);
-  th, td {
+  border-collapse: collapse;
+  th,
+  td {
     padding: 10px 10px 9px;
     line-height: @baseLineHeight;
     text-align: left;
@@ -25,22 +23,49 @@ table {
     padding-top: 9px;
     font-weight: bold;
     vertical-align: middle;
-    border-bottom: 1px solid #ddd;
   }
   td {
     vertical-align: top;
+    border-top: 1px solid #ddd;
+  }
+  // When scoped to row, fix th in tbody
+  tbody th {
+    border-top: 1px solid #ddd;
+    vertical-align: top;
+  }
+}
+
+
+// CONDENSED VERSION
+// -----------------
+
+.condensed-table {
+  th,
+  td {
+    padding: 5px 5px 4px;
   }
+}
+
+
+// BORDERED VERSION
+// ----------------
+
+.bordered-table {
+  border: 1px solid #ddd;
+  border-collapse: separate; // Done so we can round those corners!
+  *border-collapse: collapse; /* IE7, collapse table to remove spacing */
+  .border-radius(4px);
   th + th,
-  td + td {
+  td + td,
+  th + td {
     border-left: 1px solid #ddd;
   }
-  tr + tr td {
-    border-top: 1px solid #ddd;
-  }
-  tbody tr:first-child td:first-child {
+  thead:first-child tr:first-child th:first-child,
+  tbody:first-child tr:first-child td:first-child {
     .border-radius(4px 0 0 0);
   }
-  tbody tr:first-child td:last-child {
+  thead:first-child tr:first-child th:last-child,
+  tbody:first-child tr:first-child td:last-child {
     .border-radius(0 4px 0 0);
   }
   tbody tr:last-child td:first-child {
@@ -52,20 +77,55 @@ table {
 }
 
 
+// ----------------
+
+// This is a duplication of the main grid .columns() mixin, but subtracts 20px to account for input padding and border
+.tableColumns(@columnSpan: 1) {
+  width: ((@gridColumnWidth - 20) * @columnSpan) + ((@gridColumnWidth - 20) * (@columnSpan - 1));
+}
+table {
+  // Default columns
+  .span1     { .tableColumns(1); }
+  .span2     { .tableColumns(2); }
+  .span3     { .tableColumns(3); }
+  .span4     { .tableColumns(4); }
+  .span5     { .tableColumns(5); }
+  .span6     { .tableColumns(6); }
+  .span7     { .tableColumns(7); }
+  .span8     { .tableColumns(8); }
+  .span9     { .tableColumns(9); }
+  .span10    { .tableColumns(10); }
+  .span11    { .tableColumns(11); }
+  .span12    { .tableColumns(12); }
+  .span13    { .tableColumns(13); }
+  .span14    { .tableColumns(14); }
+  .span15    { .tableColumns(15); }
+  .span16    { .tableColumns(16); }
+}
+
+
 // ZEBRA-STRIPING
 // --------------
 
 // Default zebra-stripe styles (alternating gray and transparent backgrounds)
-.zebra-striped {
+.striped-table {
   tbody {
-    tr:nth-child(odd) td {
+    tr:nth-child(odd) td,
+    tr:nth-child(odd) th {
       background-color: #f9f9f9;
     }
-    tr:hover td {
+    tr:hover td,
+    tr:hover th {
       background-color: #f5f5f5;
     }
   }
+}
+
 
+// TABLESORTER
+// -----------
+
+table {
   // Tablesorting styles w/ jQuery plugin
   .header {
     cursor: pointer;
@@ -111,9 +171,6 @@ table {
       .opacity(60);
     }
   }
-}
-
-table {
   // Blue Table Headings
   .blue {
     color: @blue;