From 5471ce8ea3471562cc56dd3e349982c54f6ed624 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 14 Apr 2013 20:33:10 -0700 Subject: [PATCH] Fixes #5256: Use > selector for better nesting of tables --- docs/assets/css/bootstrap.css | 90 +++++++++++++++++++---------------- less/tables.less | 90 +++++++++++++++++++---------------- 2 files changed, 96 insertions(+), 84 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 74cb442462..616661fa48 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 52261815e8..b62f22fb62 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; }