table headers

docs/components/tables.md

@@ -40,6 +40,73 @@ Due to the widespread use of tables across plugins like calendars and date picke
 </table>
 {% endexample %}
 
+## Table head options
+
+Use one of two modifier classes to make `<thead>`s appear light or dark gray.
+
+{% example html %}
+<table class="table">
+  <thead class="thead-inverse">
+    <tr>
+      <th>#</th>
+      <th>First Name</th>
+      <th>Last Name</th>
+      <th>Username</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>1</td>
+      <td>Mark</td>
+      <td>Otto</td>
+      <td>@mdo</td>
+    </tr>
+    <tr>
+      <td>2</td>
+      <td>Jacob</td>
+      <td>Thornton</td>
+      <td>@fat</td>
+    </tr>
+    <tr>
+      <td>3</td>
+      <td>Larry</td>
+      <td>the Bird</td>
+      <td>@twitter</td>
+    </tr>
+  </tbody>
+  <thead class="thead-default">
+    <tr>
+      <th>#</th>
+      <th>First Name</th>
+      <th>Last Name</th>
+      <th>Username</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>1</td>
+      <td>Mark</td>
+      <td>Otto</td>
+      <td>@mdo</td>
+    </tr>
+    <tr>
+      <td>2</td>
+      <td>Jacob</td>
+      <td>Thornton</td>
+      <td>@fat</td>
+    </tr>
+    <tr>
+      <td>3</td>
+      <td>Larry</td>
+      <td>the Bird</td>
+      <td>@twitter</td>
+    </tr>
+  </tbody>
+</table>
+{% endexample %}
+
+
+
 ## Striped rows
 
 Use `.table-striped` to add zebra-striping to any table row within the `<tbody>`.

docs/dist/css/bootstrap.css

@@ -1638,6 +1638,14 @@ table th[class*="col-"] {
     border-bottom: 0;
   }
 }
+.table > .thead-inverse > tr > th {
+  color: #fff;
+  background-color: #373a3c;
+}
+.table > .thead-default > tr > th {
+  color: #55595c;
+  background-color: #eceeef;
+}
 fieldset {
   min-width: 0;
   padding: 0;

less/tables.less

@@ -231,3 +231,18 @@ table {
     }
   }
 }
+
+
+.table > .thead-inverse {
+  > tr > th {
+    color: #fff;
+    background-color: @gray-dark;
+  }
+}
+.table > .thead-default {
+  > tr > th {
+    color: @gray;
+    background-color: @gray-lighter;
+  }
+}
+