inverse table idea

dist/css/bootstrap.css

@@ -1404,8 +1404,8 @@ table {
   background-color: transparent;
 }
 caption {
-  padding-top: .5rem;
+  padding-top: .75rem;
-  padding-bottom: .5rem;
+  padding-bottom: .75rem;
   color: #818a91;
   text-align: left;
 }
@@ -1423,7 +1423,7 @@ th {
 .table > thead > tr > td,
 .table > tbody > tr > td,
 .table > tfoot > tr > td {
-  padding: .5rem;
+  padding: .75rem;
   line-height: 1.5;
   vertical-align: top;
   border-top: 1px solid #eceeef;
@@ -1646,6 +1646,19 @@ table th[class*="col-"] {
   color: #55595c;
   background-color: #eceeef;
 }
+.table-inverse {
+  color: #eceeef;
+  background-color: #373a3c;
+}
+.table-inverse.table-bordered {
+  border: 0;
+}
+.table-inverse > thead > tr > th,
+.table-inverse > tbody > tr > th,
+.table-inverse > thead > tr > td,
+.table-inverse > tbody > tr > td {
+  border-color: #55595c;
+}
 fieldset {
   min-width: 0;
   padding: 0;

docs/components/tables.md

@@ -40,6 +40,41 @@ Due to the widespread use of tables across plugins like calendars and date picke
 </table>
 {% endexample %}
 
+## Inverse table
+
+{% example html %}
+<table class="table table-inverse">
+  <thead>
+    <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 %}
+
 ## Table head options
 
 Use one of two modifier classes to make `<thead>`s appear light or dark gray.
@@ -105,8 +140,6 @@ Use one of two modifier classes to make `<thead>`s appear light or dark gray.
 </table>
 {% endexample %}
 
-
-
 ## Striped rows
 
 Use `.table-striped` to add zebra-striping to any table row within the `<tbody>`.

docs/dist/css/bootstrap.css

@@ -1404,8 +1404,8 @@ table {
   background-color: transparent;
 }
 caption {
-  padding-top: .5rem;
+  padding-top: .75rem;
-  padding-bottom: .5rem;
+  padding-bottom: .75rem;
   color: #818a91;
   text-align: left;
 }
@@ -1423,7 +1423,7 @@ th {
 .table > thead > tr > td,
 .table > tbody > tr > td,
 .table > tfoot > tr > td {
-  padding: .5rem;
+  padding: .75rem;
   line-height: 1.5;
   vertical-align: top;
   border-top: 1px solid #eceeef;
@@ -1646,6 +1646,19 @@ table th[class*="col-"] {
   color: #55595c;
   background-color: #eceeef;
 }
+.table-inverse {
+  color: #eceeef;
+  background-color: #373a3c;
+}
+.table-inverse.table-bordered {
+  border: 0;
+}
+.table-inverse > thead > tr > th,
+.table-inverse > tbody > tr > th,
+.table-inverse > thead > tr > td,
+.table-inverse > tbody > tr > td {
+  border-color: #55595c;
+}
 fieldset {
   min-width: 0;
   padding: 0;

less/tables.less

@@ -246,3 +246,21 @@ table {
   }
 }
 
+.table-inverse {
+  color: @gray-lighter;
+  background-color: @gray-dark;
+
+  &.table-bordered {
+    border: 0;
+  }
+
+  > thead,
+  > tbody {
+    > tr {
+      > th,
+      > td {
+        border-color: @gray;
+      }
+    }
+  }
+}

less/variables.less

@@ -124,7 +124,7 @@
 //## Customizes the `.table` component with basic values, each used across all table variations.
 
 //** Padding for `<th>`s and `<td>`s.
-@table-cell-padding:            .5rem;
+@table-cell-padding:            .75rem;
 //** Padding for cells in `.table-condensed`.
 @table-condensed-cell-padding:  .3rem;