Merge pull request #8370 from cvrebert/tables-nesting

refactor tables.less to use nesting more

docs/assets/css/bootstrap.css

@@ -1126,10 +1126,10 @@ th {
 }
 
 .table caption + thead tr:first-child th,
-.table caption + thead tr:first-child td,
 .table colgroup + thead tr:first-child th,
-.table colgroup + thead tr:first-child td,
 .table thead:first-child tr:first-child th,
+.table caption + thead tr:first-child td,
+.table colgroup + thead tr:first-child td,
 .table thead:first-child tr:first-child td {
   border-top: 0;
 }
@@ -1212,15 +1212,15 @@ th {
 }
 
 .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 > caption + tbody > tr:first-child > td: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 > caption + tbody > tr:first-child > td:last-child,
 .table-bordered > colgroup + tbody > tr:first-child > td:last-child {
   border-top-right-radius: 4px;
 }

less/tables.less

@@ -19,28 +19,32 @@ th {
   width: 100%;
   margin-bottom: @line-height-computed;
   // Cells
-  thead > tr > th,
-  tbody > tr > th,
-  thead > tr > td,
-  tbody > tr > td {
+  thead,
+  tbody {
+    > tr {
+      > th,
+      > td {
         padding: 8px;
         line-height: @line-height-base;
         vertical-align: top;
         border-top: 1px solid @table-border-color;
       }
+    }
+  }
   // Bottom align for column headings
   thead > tr > th {
     vertical-align: bottom;
   }
   // Remove top border from thead by default
-  caption + thead tr:first-child th,
-  caption + thead tr:first-child td,
-  colgroup + thead tr:first-child th,
-  colgroup + thead tr:first-child td,
-  thead:first-child tr:first-child th,
-  thead:first-child tr:first-child td {
+  caption + thead,
+  colgroup + thead,
+  thead:first-child {
+    tr:first-child {
+      th, td {
         border-top: 0;
       }
+    }
+  }
   // Account for multiple tbody instances
   tbody + tbody {
     border-top: 2px solid @table-border-color;
@@ -58,12 +62,15 @@ th {
 // -------------------------------
 
 .table-condensed {
-  thead > tr > th,
-  tbody > tr > th,
-  thead > tr > td,
-  tbody > tr > td {
+  thead,
+  tbody {
+    > tr {
+      > th,
+      > td {
         padding: 4px 5px;
       }
+    }
+  }
 }
 
 
@@ -77,12 +84,15 @@ th {
   border-left: 0;
   border-radius: @border-radius-base;
 
-  > thead > tr > th,
-  > tbody > tr > th,
-  > thead > tr > td,
-  > tbody > tr > td {
+  > thead,
+  > tbody {
+    > tr {
+      > th,
+      > td {
         border-left: 1px solid @table-border-color;
       }
+    }
+  }
   // Prevent a double border
   > caption + thead > tr:first-child th,
   > caption + tbody > tr:first-child th,
@@ -131,17 +141,18 @@ th {
   }
 
   // Special fixes to round the left border on the first td/th
-  > caption + thead > tr:first-child > th,
-  > caption + tbody > tr:first-child > td,
-  > colgroup + thead > tr:first-child > th,
-  > colgroup + tbody > tr:first-child > td {
-    &:first-child{
+  > caption,
+  > colgroup {
+    + thead > tr:first-child > th,
+    + tbody > tr:first-child > td {
+      &:first-child {
         border-top-left-radius: @border-radius-base;
       }
-    &:last-child{
+      &:last-child {
         border-top-right-radius: @border-radius-base;
       }
     }
+  }
 }
 
 
@@ -152,11 +163,13 @@ th {
 // Default zebra-stripe styles (alternating gray and transparent backgrounds)
 .table-striped {
   > tbody {
-    > tr:nth-child(odd) > td,
-    > tr:nth-child(odd) > th {
+    > tr:nth-child(odd) {
+      > td,
+      > th {
         background-color: @table-bg-accent;
       }
     }
+  }
 }
 
 
@@ -167,11 +180,13 @@ th {
 // Placed here since it has to come after the potential zebra striping
 .table-hover {
   > tbody {
-    > tr:hover > td,
-    > tr:hover > th {
+    > tr:hover {
+      > td,
+      > th {
         background-color: @table-bg-hover;
       }
     }
+  }
 }
 
 
@@ -184,10 +199,13 @@ table col[class^="col-"] {
   float: none;
   display: table-column;
 }
-table td[class^="col-"],
-table th[class^="col-"] {
+table {
+  td, th {
+    &[class^="col-"] {
       float: none;
       display: table-cell;
+    }
+  }
 }