Fixes #7281: make tables super specific for hovers and striping to avoid nesting issues

docs/assets/css/bootstrap.css

@@ -967,13 +967,13 @@ th {
   border-top-right-radius: 4px;
 }
 
-.table-striped tbody > tr:nth-child(odd) > td,
-.table-striped tbody > tr:nth-child(odd) > th {
+.table-striped > tbody > tr:nth-child(odd) > td,
+.table-striped > tbody > tr:nth-child(odd) > th {
   background-color: #f9f9f9;
 }
 
-.table-hover tbody tr:hover > td,
-.table-hover tbody tr:hover > th {
+.table-hover > tbody > tr:hover > td,
+.table-hover > tbody > tr:hover > th {
   background-color: #f5f5f5;
 }
 
@@ -988,27 +988,27 @@ table th[class^="span"] {
   float: none;
 }
 
-.table tbody tr.success > td {
+.table > tbody > tr.success > td {
   background-color: #dff0d8;
 }
 
-.table tbody tr.error > td {
+.table > tbody > tr.error > td {
   background-color: #f2dede;
 }
 
-.table tbody tr.warning > td {
+.table > tbody > tr.warning > td {
   background-color: #fcf8e3;
 }
 
-.table-hover tbody tr.success:hover > td {
+.table-hover > tbody > tr.success:hover > td {
   background-color: #d0e9c6;
 }
 
-.table-hover tbody tr.error:hover > td {
+.table-hover > tbody > tr.error:hover > td {
   background-color: #ebcccc;
 }
 
-.table-hover tbody tr.warning:hover > td {
+.table-hover > tbody > tr.warning:hover > td {
   background-color: #faf2cc;
 }
 

less/tables.less

@@ -150,7 +150,7 @@ th {
 
 // Default zebra-stripe styles (alternating gray and transparent backgrounds)
 .table-striped {
-  tbody {
+  > tbody {
     > tr:nth-child(odd) > td,
     > tr:nth-child(odd) > th {
       background-color: @table-background-accent;
@@ -162,11 +162,12 @@ th {
 
 // HOVER EFFECT
 // ------------
+
 // Placed here since it has to come after the potential zebra striping
 .table-hover {
-  tbody {
-    tr:hover > td,
-    tr:hover > th {
+  > tbody {
+    > tr:hover > td,
+    > tr:hover > th {
       background-color: @table-background-hover;
     }
   }
@@ -192,7 +193,7 @@ table th[class^="span"] {
 // -----------------
 // Exact selectors below required to override .table-striped
 
-.table tbody tr {
+.table > tbody > tr {
   &.success > td {
     background-color: @state-success-background;
   }
@@ -205,7 +206,7 @@ table th[class^="span"] {
 }
 
 // Hover states for .table-hover
-.table-hover tbody tr {
+.table-hover > tbody > tr {
   &.success:hover > td {
     background-color: darken(@state-success-background, 5%);
   }