#3223: make table row hover optional class

docs/assets/css/bootstrap.css

@@ -1748,8 +1748,8 @@ table {
   background-color: #f9f9f9;
 }
 
-.table tbody tr:hover td,
-.table tbody tr:hover th {
+.table-hover tbody tr:hover td,
+.table-hover tbody tr:hover th {
   background-color: #f5f5f5;
 }
 

docs/base-css.html

@@ -566,6 +566,45 @@ For example, <code>section</code> should be wrapped as inline.
 <table class="table table-bordered">
   …
 </table>
+</pre>
+
+  <h3><code>.table-hover</code></h3>
+  <p>Enable a hover state on table rows within a <code>&lt;tbody&gt;</code>.</p>
+  <div class="bs-docs-example">
+    <table class="table table-hover">
+      <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 colspan="2">Larry the Bird</td>
+          <td>@twitter</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+<pre class="prettyprint linenums" style="margin-bottom: 18px;">
+&lt;table class="table table-hover"&gt;
+  …
+&lt;/table&gt;
 </pre>
 
   <h3><code>.table-condensed</code></h3>

docs/templates/pages/base-css.mustache

@@ -497,6 +497,45 @@
 <table class="table table-bordered">
   …
 </table>
+</pre>
+
+  <h3><code>{{_i}}.table-hover{{/i}}</code></h3>
+  <p>{{_i}}Enable a hover state on table rows within a <code>&lt;tbody&gt;</code>.{{/i}}</p>
+  <div class="bs-docs-example">
+    <table class="table table-hover">
+      <thead>
+        <tr>
+          <th>#</th>
+          <th>{{_i}}First Name{{/i}}</th>
+          <th>{{_i}}Last Name{{/i}}</th>
+          <th>{{_i}}Username{{/i}}</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 colspan="2">Larry the Bird</td>
+          <td>@twitter</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>{{! /example }}
+<pre class="prettyprint linenums" style="margin-bottom: 18px;">
+&lt;table class="table table-hover"&gt;
+  …
+&lt;/table&gt;
 </pre>
 
   <h3><code>{{_i}}.table-condensed{{/i}}</code></h3>

less/tables.less

@@ -136,7 +136,7 @@ table {
 // HOVER EFFECT
 // ------------
 // Placed here since it has to come after the potential zebra striping
-.table {
+.table-hover {
   tbody tr:hover td,
   tbody tr:hover th {
     background-color: @tableBackgroundHover;