scope table styles to a class, .table, instead of on the generic element as a smarter default

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: Tue Jan 17 23:24:38 PST 2012
+ * Date: Tue Jan 17 23:38:42 PST 2012
  */
 html, body {
   margin: 0;
@@ -975,27 +975,27 @@ input::-webkit-input-placeholder {
 .form-horizontal .form-actions {
   padding-left: 160px;
 }
-table {
+.table {
   width: 100%;
   margin-bottom: 18px;
 }
-th, td {
+.table th, .table td {
   padding: 8px;
   line-height: 18px;
   text-align: left;
   border-top: 1px solid #ddd;
 }
-th {
+.table th {
   font-weight: bold;
   vertical-align: bottom;
 }
-td {
+.table td {
   vertical-align: top;
 }
-thead:first-child tr th, thead:first-child tr td {
+.table thead:first-child tr th, .table thead:first-child tr td {
   border-top: 0;
 }
-tbody + tbody {
+.table tbody + tbody {
   border-top: 2px solid #ddd;
 }
 .table-condensed th, .table-condensed td {

bootstrap.min.css

@@ -176,12 +176,11 @@ input::-webkit-input-placeholder{color:#999999;}
 .form-horizontal .control-group>label{float:left;width:140px;padding-top:5px;text-align:right;}
 .form-horizontal .controls{margin-left:160px;}
 .form-horizontal .form-actions{padding-left:160px;}
-table{width:100%;margin-bottom:18px;}
-th,td{padding:8px;line-height:18px;text-align:left;border-top:1px solid #ddd;}
-th{font-weight:bold;vertical-align:bottom;}
-td{vertical-align:top;}
-thead:first-child tr th,thead:first-child tr td{border-top:0;}
-tbody+tbody{border-top:2px solid #ddd;}
+.table{width:100%;margin-bottom:18px;}.table th,.table td{padding:8px;line-height:18px;text-align:left;border-top:1px solid #ddd;}
+.table th{font-weight:bold;vertical-align:bottom;}
+.table td{vertical-align:top;}
+.table thead:first-child tr th,.table thead:first-child tr td{border-top:0;}
+.table tbody+tbody{border-top:2px solid #ddd;}
 .table-condensed th,.table-condensed td{padding:4px 5px;}
 .table-bordered{border:1px solid #ddd;border-collapse:separate;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.table-bordered th+th,.table-bordered td+td,.table-bordered th+td,.table-bordered td+th{border-left:1px solid #ddd;}
 .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;}

docs/base-css.html

@@ -150,7 +150,7 @@
 
   <!-- Misc Elements -->
   <h2>Emphasis, address, and abbreviation</h2>
-  <table class="table-bordered table-striped">
+  <table class="table table-bordered table-striped">
     <thead>
       <tr>
         <th>Element</th>
@@ -237,7 +237,7 @@
 
   <!-- Blockquotes -->
   <h2>Blockquotes</h2>
-  <table class="table-bordered table-striped">
+  <table class="table table-bordered table-striped">
     <thead>
       <tr>
         <th>Element</th>
@@ -383,7 +383,7 @@
   <!-- Code -->
 
   <h2>Code <small>Inline and block</small></h2>
-  <table class="table-bordered table-striped">
+  <table class="table table-bordered table-striped">
     <thead>
       <tr>
         <th style="width: 190px;">Element</th>
@@ -425,7 +425,7 @@
 
   <!-- Labels -->
   <h2>Inline labels <small>for special attention</small></h2>
-  <table class="table-bordered table-striped">
+  <table class="table table-bordered table-striped">
     <thead>
       <tr>
         <th style="width: 190px;">Labels</th>
@@ -490,7 +490,7 @@
   <h2>Table markup</h2>
   <div class="row">
     <div class="span8">
-      <table class="table-bordered table-striped">
+      <table class="table table-bordered table-striped">
         <thead>
           <tr>
             <th>Tag</th>
@@ -579,7 +579,7 @@
   </div>
 
   <h2>Table options</h2>
-  <table class="table-bordered table-striped">
+  <table class="table table-bordered table-striped">
   <thead>
       <tr>
         <th>Name</th>
@@ -591,6 +591,13 @@
       <tr>
         <td>Default</td>
         <td class="muted">None</td>
+        <td>No styles, just columns and rows</td>
+      </tr>
+      <tr>
+        <td>Basic</td>
+        <td>
+          <code>.table</code>
+        </td>
         <td>Only horizontal lines between rows</td>
       </tr>
       <tr>
@@ -623,14 +630,14 @@
   <h3>1. Default table styles</h3>
   <div class="row">
     <div class="span4">
-      <p>Tables are automatically styled with only a few borders to ensure readability and maintain structure. No classes are required.</p>
+      <p>Tables are automatically styled with only a few borders to ensure readability and maintain structure. With 2.0, the <code>.table</code> class is required.</p>
 <pre class="prettyprint linenums">
-&lt;table&gt;
+&lt;table class="table"&gt;
   ...
 &lt;/table&gt;</pre>
     </div>
     <div class="span8">
-      <table>
+      <table class="table">
         <thead>
           <tr>
             <th>#</th>
@@ -670,12 +677,12 @@
       <p>Get a little fancy with your tables by adding zebra-striping&mdash;just add the <code>.table-striped</code> class.</p>
       <p class="muted"><strong>Note:</strong> Sprited tables use the <code>:nth-child</code> CSS selector and is not available in IE7-IE8.</p>
 <pre class="prettyprint linenums" style="margin-bottom: 18px;">
-&lt;table class="table-striped"&gt;
+&lt;table class="table table-striped"&gt;
   ...
 &lt;/table&gt;</pre>
     </div>
     <div class="span8">
-      <table class="table-striped">
+      <table class="table table-striped">
         <thead>
           <tr>
             <th>#</th>
@@ -714,12 +721,12 @@
     <div class="span4">
       <p>Add borders around the entire table and rounded corners for aesthetic purposes.</p>
 <pre class="prettyprint linenums">
-&lt;table class="table-bordered"&gt;
+&lt;table class="table table-bordered"&gt;
   ...
 &lt;/table&gt;</pre>
     </div>
     <div class="span8">
-      <table class="table-bordered">
+      <table class="table table-bordered">
         <thead>
           <tr>
             <th>#</th>
@@ -762,12 +769,12 @@
     <div class="span4">
       <p>Make your tables more compact by adding the <code>.table-condensed</code> class to cut table cell padding in half (from 10px to 5px).</p>
 <pre class="prettyprint linenums" style="margin-bottom: 18px;">
-&lt;table class="table-condensed"&gt;
+&lt;table class="table table-condensed"&gt;
   ...
 &lt;/table&gt;</pre>
     </div>
     <div class="span8">
-      <table class="table-condensed">
+      <table class="table table-condensed">
         <thead>
           <tr>
             <th>#</th>
@@ -816,12 +823,12 @@
     });
   });
 &lt;/script&gt;
-&lt;table class="table-striped"&gt;
+&lt;table class="table table-striped"&gt;
   ...
 &lt;/table&gt;</pre>
     </div>
     <div class="span8">
-      <table class="table-striped tablesorter-example">
+      <table class="table table-striped tablesorter-example">
         <thead>
           <tr>
             <th>#</th>
@@ -858,7 +865,7 @@
         </tbody>
       </table>
       <p>Styles for the Tablesorter, zebra striping, borders, and condensing may all compound in any variation to fit your needs.</p>
-      <table class="table-striped table-bordered table-condensed tablesorter-example">
+      <table class="table table-striped table-bordered table-condensed tablesorter-example">
         <thead>
           <tr>
             <th>#</th>
@@ -932,7 +939,7 @@
 
   <h2>Four types of forms</h2>
   <p>Bootstrap provides simple markup and styles for four styles of common web forms.</p>
-  <table class="table-bordered table-striped">
+  <table class="table table-bordered table-striped">
     <thead>
       <tr>
         <th>Name</th>
@@ -1259,7 +1266,7 @@
   <div class="page-header">
     <h1>Buttons</h1>
   </div>
-  <table class="table-bordered table-striped">
+  <table class="table table-bordered table-striped">
     <thead>
       <tr>
         <th>Button</th>

docs/index.html

@@ -267,7 +267,7 @@
           ================================================== -->
           <h1>Get started in no time.</h1>
           <p class="marketing-byline">Quickly start using Bootstrap within your workflow and development process.</p>
-          <table class="table-bordered getting-started">
+          <table class="table table-bordered getting-started">
             <tbody>
               <tr>
                 <td class="quick-start">

docs/javascript.html

@@ -284,7 +284,7 @@
           <p>Call the modal via javascript:</p>
           <pre class="prettyprint linenums">$('#myModal').modal(options)</pre>
           <h3>Options</h3>
-          <table class="table-bordered table-striped">
+          <table class="table table-bordered table-striped">
             <thead>
              <tr>
                <th style="width: 100px;">Name</th>
@@ -349,7 +349,7 @@ $('#myModal').modal({
           <pre class="prettyprint linenums">$('#myModal').modal('hide')</pre>
           <h3>Events</h3>
           <p>Bootstrap's modal class exposes a few events for hooking into modal functionality. </p>
-          <table class="table-bordered table-striped">
+          <table class="table table-bordered table-striped">
             <thead>
              <tr>
                <th style="width: 150px;">Event</th>
@@ -666,7 +666,7 @@ $('#myModal').on('hidden', function () {
 &lt;/script&gt;</pre>
           </p>
           <h3>Events</h3>
-          <table class="table-bordered table-striped">
+          <table class="table table-bordered table-striped">
             <thead>
              <tr>
                <th style="width: 150px;">Event</th>
@@ -719,7 +719,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
           <p>Trigger the tooltip via javascript:</p>
           <pre class="prettyprint linenums">$('#example').tooltip(options)</pre>
           <h3>Options</h3>
-          <table class="table-bordered table-striped">
+          <table class="table table-bordered table-striped">
             <thead>
              <tr>
                <th style="width: 100px;">Name</th>
@@ -813,7 +813,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
           <p>Enable popovers via javascript:</p>
           <pre class="prettyprint linenums">$('#example').popover(options)</pre>
           <h3>Options</h3>
-          <table class="table-bordered table-striped">
+          <table class="table table-bordered table-striped">
             <thead>
              <tr>
                <th style="width: 100px;">Name</th>
@@ -933,7 +933,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
           <pre class="prettyprint linenums">$(".alert-message").alert('close')</pre>
           <h3>Events</h3>
           <p>Bootstrap's alert class exposes a few events for hooking into alert functionality. </p>
-          <table class="table-bordered table-striped">
+          <table class="table table-bordered table-striped">
             <thead>
              <tr>
                <th style="width: 150px;">Event</th>
@@ -976,7 +976,7 @@ $('#my-alert').bind('closed', function () {
         <div class="span9 columns">
           <h2>Example uses</h2>
           <p>Use the buttons plugin for states and toggles.</p>
-          <table class="table-bordered table-striped">
+          <table class="table table-bordered table-striped">
             <tbody>
              <tr>
                <td>Stateful</td>
@@ -1125,7 +1125,7 @@ $('#my-alert').bind('closed', function () {
           <p>Enable via javascript:</p>
           <pre class="prettyprint linenums">$(".collapse").collapse()</pre>
           <h3>Options</h3>
-          <table class="table-bordered table-striped">
+          <table class="table table-bordered table-striped">
             <thead>
              <tr>
                <th style="width: 100px;">Name</th>
@@ -1175,7 +1175,7 @@ $('#myCollapsible').collapse({
           <p>
             Bootstrap's collapse class exposes a few events for hooking into collapse functionality.
           </p>
-          <table class="table-bordered table-striped">
+          <table class="table table-bordered table-striped">
             <thead>
              <tr>
                <th style="width: 150px;">Event</th>
@@ -1261,7 +1261,7 @@ $('#myCollapsible').on('hidden', function () {
           <p>Call via javascript:</p>
           <pre class="prettyprint linenums">$('.carousel').carousel()</pre>
           <h3>Options</h3>
-          <table class="table-bordered table-striped">
+          <table class="table table-bordered table-striped">
             <thead>
              <tr>
                <th style="width: 100px;">Name</th>
@@ -1310,7 +1310,7 @@ $('.myCarousel').carousel({
           <p>Cycles to the next item.</p>
           <h3>Events</h3>
           <p>Bootstrap's modal class exposes a few events for hooking into modal functionality. </p>
-          <table class="table-bordered table-striped">
+          <table class="table table-bordered table-striped">
             <thead>
              <tr>
                <th style="width: 150px;">Event</th>
@@ -1358,7 +1358,7 @@ $('.myCarousel').carousel({
           <p>Call the typeahead via javascript:</p>
           <pre class="prettyprint linenums">$('.typeahead').typeahead()</pre>
           <h3>Options</h3>
-          <table class="table-bordered table-striped">
+          <table class="table table-bordered table-striped">
             <thead>
              <tr>
                <th style="width: 100px;">Name</th>

docs/less.html

@@ -160,7 +160,7 @@
       </div>
 
           <h3>Hyperlinks</h3>
-          <table class="table-bordered table-striped">
+          <table class="table table-bordered table-striped">
             <thead>
               <tr>
                 <th>Variable</th>
@@ -185,7 +185,7 @@
       <div class="row">
         <div class="span6">
           <h3>Grayscale colors</h3>
-          <table class="table-bordered table-striped">
+          <table class="table table-bordered table-striped">
             <tbody>
               <tr>
                 <td><code>@black</code></td>
@@ -216,7 +216,7 @@
         </div>
         <div class="span6">
           <h3>Accent colors</h3>
-          <table class="table-bordered table-striped">
+          <table class="table table-bordered table-striped">
             <tbody>
               <tr>
                 <td><code>@blue</code></td>
@@ -254,7 +254,7 @@
       <div class="row">
         <div class="span6">
           <h3>Grid system</h3>
-          <table class="table-bordered table-striped">
+          <table class="table table-bordered table-striped">
             <tbody>
               <tr>
                 <td><code>@gridColumns</code></td>
@@ -277,7 +277,7 @@
         </div>
         <div class="span6">
           <h3>Typography</h3>
-          <table class="table-bordered table-striped">
+          <table class="table table-bordered table-striped">
             <tbody>
               <tr>
                 <td><code>@baseFontSize</code></td>
@@ -302,7 +302,7 @@
           <h3>Visuals</h3>
         </div>
         <div class="span9">
-          <table class="table-bordered table-striped">
+          <table class="table table-bordered table-striped">
             <tbody>
               <tr>
                 <td><code>@primaryButtonColor</code></td>
@@ -453,7 +453,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="table-bordered table-striped">
+    <table class="table table-bordered table-striped">
       <thead>
         <tr>
           <th style="width: 120px;">Method</th>

docs/scaffolding.html

@@ -223,7 +223,7 @@
   </div>
 
   <h2>Grid customization</h2>
-  <table class="table-bordered table-striped">
+  <table class="table table-bordered table-striped">
     <thead>
       <tr>
         <th>Variable</th>
@@ -335,7 +335,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="table-bordered table-striped">
+      <table class="table table-bordered table-striped">
         <thead>
           <tr>
             <th>Label</th>

lib/tables.less

@@ -4,39 +4,38 @@
 // ----------------------------------------
 
 
-
 // BASELINE STYLES
 // ---------------
 
-table {
+.table {
   width: 100%;
   margin-bottom: @baseLineHeight;
-}
-th,
-td {
-  padding: 8px;
-  line-height: @baseLineHeight;
-  text-align: left;
-  border-top: 1px solid #ddd;
-}
-th {
-  font-weight: bold;
-  vertical-align: bottom;
-}
-td {
-  vertical-align: top;
+  // Cells
+  th,
+  td {
+    padding: 8px;
+    line-height: @baseLineHeight;
+    text-align: left;
+    border-top: 1px solid #ddd;
+  }
+  th {
+    font-weight: bold;
+    vertical-align: bottom;
+  }
+  td {
+    vertical-align: top;
+  }
+  // Remove top border from thead by default
+  thead:first-child tr th,
+  thead:first-child tr td {
+    border-top: 0;
+  }
+  // Account for multiple tbody instances
+  tbody + tbody {
+    border-top: 2px solid #ddd;
+  }
 }
 
-// Remove top border from thead by default
-thead:first-child tr th,
-thead:first-child tr td {
-  border-top: 0;
-}
-
-// Account for multiple tbody instances
-tbody + tbody {
-  border-top: 2px solid #ddd;
-}
 
 
 // CONDENSED TABLE W/ HALF PADDING