Fixes #5256: Use > selector for better nesting of tables

2 files changed, 96 insertions, 84 deletions

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 74cb44246..616661fa4 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -1026,15 +1026,17 @@ th {
   margin-bottom: 20px;
 }
 
-.table th,
-.table td {
+.table thead > tr > th,
+.table tbody > tr > th,
+.table thead > tr > td,
+.table tbody > tr > td {
   padding: 8px;
   line-height: 20px;
   vertical-align: top;
   border-top: 1px solid #dddddd;
 }
 
-.table thead th {
+.table thead > tr > th {
   vertical-align: bottom;
 }
 
@@ -1055,8 +1057,10 @@ th {
   background-color: #ffffff;
 }
 
-.table-condensed th,
-.table-condensed td {
+.table-condensed thead > tr > th,
+.table-condensed tbody > tr > th,
+.table-condensed thead > tr > td,
+.table-condensed tbody > tr > td {
   padding: 4px 5px;
 }
 
@@ -1067,70 +1071,72 @@ th {
   border-radius: 4px;
 }
 
-.table-bordered th,
-.table-bordered td {
+.table-bordered thead > tr > th,
+.table-bordered tbody > tr > th,
+.table-bordered thead > tr > td,
+.table-bordered tbody > tr > td {
   border-left: 1px solid #dddddd;
 }
 
-.table-bordered caption + thead tr:first-child th,
-.table-bordered caption + tbody tr:first-child th,
-.table-bordered caption + tbody tr:first-child td,
-.table-bordered colgroup + thead tr:first-child th,
-.table-bordered colgroup + tbody tr:first-child th,
-.table-bordered colgroup + tbody tr:first-child td,
-.table-bordered thead:first-child tr:first-child th,
-.table-bordered tbody:first-child tr:first-child th,
-.table-bordered tbody:first-child tr:first-child td {
+.table-bordered caption + thead > tr:first-child th,
+.table-bordered caption + tbody > tr:first-child th,
+.table-bordered caption + tbody > tr:first-child td,
+.table-bordered colgroup + thead > tr:first-child th,
+.table-bordered colgroup + tbody > tr:first-child th,
+.table-bordered colgroup + tbody > tr:first-child td,
+.table-bordered thead:first-child > tr:first-child th,
+.table-bordered tbody:first-child > tr:first-child th,
+.table-bordered tbody:first-child > tr:first-child td {
   border-top: 0;
 }
 
-.table-bordered thead:first-child tr:first-child > th:first-child,
-.table-bordered tbody:first-child tr:first-child > td:first-child,
-.table-bordered tbody:first-child tr:first-child > th:first-child {
+.table-bordered thead:first-child > tr:first-child > th:first-child,
+.table-bordered tbody:first-child > tr:first-child > td:first-child,
+.table-bordered tbody:first-child > tr:first-child > th:first-child {
   border-top-left-radius: 4px;
 }
 
-.table-bordered thead:first-child tr:first-child > th:last-child,
-.table-bordered tbody:first-child tr:first-child > td:last-child,
-.table-bordered tbody:first-child tr:first-child > th:last-child {
+.table-bordered thead:first-child > tr:first-child > th:last-child,
+.table-bordered tbody:first-child > tr:first-child > td:last-child,
+.table-bordered tbody:first-child > tr:first-child > th:last-child {
   border-top-right-radius: 4px;
 }
 
-.table-bordered thead:last-child tr:last-child > th:first-child,
-.table-bordered tbody:last-child tr:last-child > td:first-child,
-.table-bordered tbody:last-child tr:last-child > th:first-child,
-.table-bordered tfoot:last-child tr:last-child > td:first-child,
-.table-bordered tfoot:last-child tr:last-child > th:first-child {
+.table-bordered thead:last-child > tr:last-child > th:first-child,
+.table-bordered tbody:last-child > tr:last-child > td:first-child,
+.table-bordered tbody:last-child > tr:last-child > th:first-child,
+.table-bordered tfoot:last-child > tr:last-child > td:first-child,
+.table-bordered tfoot:last-child > tr:last-child > th:first-child {
   border-bottom-left-radius: 4px;
 }
 
-.table-bordered thead:last-child tr:last-child > th:last-child,
-.table-bordered tbody:last-child tr:last-child > td:last-child,
-.table-bordered tbody:last-child tr:last-child > th:last-child,
-.table-bordered tfoot:last-child tr:last-child > td:last-child,
-.table-bordered tfoot:last-child tr:last-child > th:last-child {
+.table-bordered thead:last-child > tr:last-child > th:last-child,
+.table-bordered tbody:last-child > tr:last-child > td:last-child,
+.table-bordered tbody:last-child > tr:last-child > th:last-child,
+.table-bordered tfoot:last-child > tr:last-child > td:last-child,
+.table-bordered tfoot:last-child > tr:last-child > th:last-child {
   border-bottom-right-radius: 4px;
 }
 
-.table-bordered tfoot + tbody:last-child tr:last-child > td:first-child {
+.table-bordered tfoot + tbody:last-child > tr:last-child > td:first-child {
   border-bottom-left-radius: 0;
 }
 
-.table-bordered tfoot + tbody:last-child tr:last-child > td:last-child {
+.table-bordered tfoot + tbody:last-child > tr:last-child > td:last-child {
   border-bottom-right-radius: 0;
 }
 
-.table-bordered caption + thead tr:first-child th:first-child,
-.table-bordered caption + tbody tr:first-child td:first-child,
-.table-bordered colgroup + thead tr:first-child th:first-child,
-.table-bordered colgroup + tbody tr:first-child td:first-child {
+.table-bordered caption + thead > tr:first-child > th:first-child,
+.table-bordered caption + tbody > tr:first-child > td:first-child,
+.table-bordered colgroup + thead > tr:first-child > th:first-child,
+.table-bordered colgroup + tbody > tr:first-child > td:first-child {
   border-top-left-radius: 4px;
 }
 
-.table-bordered caption + thead tr:first-child th:last-child,
-.table-bordered caption + tbody tr:first-child td:last-child,
-.table-bordered colgroup + thead tr:first-child th:last-child,
-.table-bordered colgroup + tbody tr:first-child td:last-child {
+.table-bordered caption + thead > tr:first-child > th:last-child,
+.table-bordered caption + tbody > tr:first-child > td:last-child,
+.table-bordered colgroup + thead > tr:first-child > th:last-child,
+.table-bordered colgroup + tbody > tr:first-child > td:last-child {
   border-top-right-radius: 4px;
 }
 
diff --git a/less/tables.less b/less/tables.less
index 52261815e..b62f22fb6 100644
--- a/less/tables.less
+++ b/less/tables.less
@@ -21,15 +21,17 @@ th {
   width: 100%;
   margin-bottom: @line-height-base;
   // Cells
-  th,
-  td {
+  thead > tr > th,
+  tbody > tr > th,
+  thead > tr > td,
+  tbody > tr > td {
     padding: 8px;
     line-height: @line-height-base;
     vertical-align: top;
     border-top: 1px solid @table-border-color;
   }
   // Bottom align for column headings
-  thead th {
+  thead > tr > th {
     vertical-align: bottom;
   }
   // Remove top border from thead by default
@@ -58,8 +60,10 @@ th {
 // -------------------------------
 
 .table-condensed {
-  th,
-  td {
+  thead > tr > th,
+  tbody > tr > th,
+  thead > tr > td,
+  tbody > tr > td {
     padding: 4px 5px;
   }
 }
@@ -74,70 +78,72 @@ th {
   border-collapse: separate; // Done so we can round those corners!
   border-left: 0;
   border-radius: @border-radius-base;
-  th,
-  td {
+  thead > tr > th,
+  tbody > tr > th,
+  thead > tr > td,
+  tbody > tr > td {
     border-left: 1px solid @table-border-color;
   }
   // Prevent a double border
-  caption + thead tr:first-child th,
-  caption + tbody tr:first-child th,
-  caption + tbody tr:first-child td,
-  colgroup + thead tr:first-child th,
-  colgroup + tbody tr:first-child th,
-  colgroup + tbody tr:first-child td,
-  thead:first-child tr:first-child th,
-  tbody:first-child tr:first-child th,
-  tbody:first-child tr:first-child td {
+  caption + thead > tr:first-child th,
+  caption + tbody > tr:first-child th,
+  caption + tbody > tr:first-child td,
+  colgroup + thead > tr:first-child th,
+  colgroup + tbody > tr:first-child th,
+  colgroup + tbody > tr:first-child td,
+  thead:first-child > tr:first-child th,
+  tbody:first-child > tr:first-child th,
+  tbody:first-child > tr:first-child td {
     border-top: 0;
   }
   // For first th/td in the first row in the first thead or tbody
-  thead:first-child tr:first-child > th:first-child,
-  tbody:first-child tr:first-child > td:first-child,
-  tbody:first-child tr:first-child > th:first-child {
+  thead:first-child > tr:first-child > th:first-child,
+  tbody:first-child > tr:first-child > td:first-child,
+  tbody:first-child > tr:first-child > th:first-child {
     border-top-left-radius: @border-radius-base;
   }
   // For last th/td in the first row in the first thead or tbody
-  thead:first-child tr:first-child > th:last-child,
-  tbody:first-child tr:first-child > td:last-child,
-  tbody:first-child tr:first-child > th:last-child {
+  thead:first-child > tr:first-child > th:last-child,
+  tbody:first-child > tr:first-child > td:last-child,
+  tbody:first-child > tr:first-child > th:last-child {
     border-top-right-radius: @border-radius-base;
   }
   // For first th/td (can be either) in the last row in the last thead, tbody, and tfoot
-  thead:last-child tr:last-child > th:first-child,
-  tbody:last-child tr:last-child > td:first-child,
-  tbody:last-child tr:last-child > th:first-child,
-  tfoot:last-child tr:last-child > td:first-child,
-  tfoot:last-child tr:last-child > th:first-child {
+  thead:last-child > tr:last-child > th:first-child,
+  tbody:last-child > tr:last-child > td:first-child,
+  tbody:last-child > tr:last-child > th:first-child,
+  tfoot:last-child > tr:last-child > td:first-child,
+  tfoot:last-child > tr:last-child > th:first-child {
     border-bottom-left-radius: @border-radius-base;
   }
   // For last th/td (can be either) in the last row in the last thead, tbody, and tfoot
-  thead:last-child tr:last-child > th:last-child,
-  tbody:last-child tr:last-child > td:last-child,
-  tbody:last-child tr:last-child > th:last-child,
-  tfoot:last-child tr:last-child > td:last-child,
-  tfoot:last-child tr:last-child > th:last-child {
+  thead:last-child > tr:last-child > th:last-child,
+  tbody:last-child > tr:last-child > td:last-child,
+  tbody:last-child > tr:last-child > th:last-child,
+  tfoot:last-child > tr:last-child > td:last-child,
+  tfoot:last-child > tr:last-child > th:last-child {
     border-bottom-right-radius: @border-radius-base;
   }
 
   // Clear border-radius for first and last td in the last row in the last tbody for table with tfoot
-  tfoot + tbody:last-child tr:last-child > td:first-child {
+  tfoot + tbody:last-child > tr:last-child > td:first-child {
     border-bottom-left-radius: 0;
   }
-  tfoot + tbody:last-child tr:last-child > td:last-child {
+  tfoot + tbody:last-child > tr:last-child > td:last-child {
     border-bottom-right-radius: 0;
   }
 
   // Special fixes to round the left border on the first td/th
-  caption + thead tr:first-child th:first-child,
-  caption + tbody tr:first-child td:first-child,
-  colgroup + thead tr:first-child th:first-child,
-  colgroup + tbody tr:first-child td:first-child {
+  caption + thead > tr:first-child > th:first-child,
+  caption + tbody > tr:first-child > td:first-child,
+  colgroup + thead > tr:first-child > th:first-child,
+  colgroup + tbody > tr:first-child > td:first-child {
     border-top-left-radius: @border-radius-base;
   }
-  caption + thead tr:first-child th:last-child,
-  caption + tbody tr:first-child td:last-child,
-  colgroup + thead tr:first-child th:last-child,
-  colgroup + tbody tr:first-child td:last-child {
+  caption + thead > tr:first-child > th:last-child,
+  caption + tbody > tr:first-child > td:last-child,
+  colgroup + thead > tr:first-child > th:last-child,
+  colgroup + tbody > tr:first-child > td:last-child {
     border-top-right-radius: @border-radius-base;
   }