From 27845e4492741a973231ff1be6c493e001a28555 Mon Sep 17 00:00:00 2001
From: Mark Otto <markotto@twitter.com>
Date: Mon, 25 Jun 2012 14:11:37 -0700
Subject: [PATCH] #3223: make table row hover optional class

---
 docs/assets/css/bootstrap.css          |  4 +--
 docs/base-css.html                     | 39 ++++++++++++++++++++++++++
 docs/templates/pages/base-css.mustache | 39 ++++++++++++++++++++++++++
 less/tables.less                       |  2 +-
 4 files changed, 81 insertions(+), 3 deletions(-)

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index e760daae8d..88db0c0444 100644
--- a/docs/assets/css/bootstrap.css
+++ b/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;
 }
 
diff --git a/docs/base-css.html b/docs/base-css.html
index 4136399340..9eed2bea23 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -566,6 +566,45 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
 &lt;table class="table table-bordered"&gt;
   …
 &lt;/table&gt;
+</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>
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 0f0537ede1..583d0709ee 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -497,6 +497,45 @@
 &lt;table class="table table-bordered"&gt;
   …
 &lt;/table&gt;
+</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>
diff --git a/less/tables.less b/less/tables.less
index b4f6027bf9..8bd563a062 100644
--- a/less/tables.less
+++ b/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;
-- 
GitLab