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

This commit is contained in:
Mark Otto 2013-04-14 20:33:10 -07:00
parent ab7070bb49
commit 5471ce8ea3
2 changed files with 96 additions and 84 deletions

View File

@ -1026,15 +1026,17 @@ th {
margin-bottom: 20px; margin-bottom: 20px;
} }
.table th, .table thead > tr > th,
.table td { .table tbody > tr > th,
.table thead > tr > td,
.table tbody > tr > td {
padding: 8px; padding: 8px;
line-height: 20px; line-height: 20px;
vertical-align: top; vertical-align: top;
border-top: 1px solid #dddddd; border-top: 1px solid #dddddd;
} }
.table thead th { .table thead > tr > th {
vertical-align: bottom; vertical-align: bottom;
} }
@ -1055,8 +1057,10 @@ th {
background-color: #ffffff; background-color: #ffffff;
} }
.table-condensed th, .table-condensed thead > tr > th,
.table-condensed td { .table-condensed tbody > tr > th,
.table-condensed thead > tr > td,
.table-condensed tbody > tr > td {
padding: 4px 5px; padding: 4px 5px;
} }
@ -1067,70 +1071,72 @@ th {
border-radius: 4px; border-radius: 4px;
} }
.table-bordered th, .table-bordered thead > tr > th,
.table-bordered td { .table-bordered tbody > tr > th,
.table-bordered thead > tr > td,
.table-bordered tbody > tr > td {
border-left: 1px solid #dddddd; border-left: 1px solid #dddddd;
} }
.table-bordered caption + thead tr:first-child th, .table-bordered caption + thead > tr:first-child th,
.table-bordered caption + tbody tr:first-child th, .table-bordered caption + tbody > tr:first-child th,
.table-bordered caption + tbody tr:first-child td, .table-bordered caption + tbody > tr:first-child td,
.table-bordered colgroup + thead tr:first-child th, .table-bordered colgroup + thead > tr:first-child th,
.table-bordered colgroup + tbody tr:first-child th, .table-bordered colgroup + tbody > tr:first-child th,
.table-bordered colgroup + tbody tr:first-child td, .table-bordered colgroup + tbody > tr:first-child td,
.table-bordered thead:first-child tr:first-child th, .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 th,
.table-bordered tbody:first-child tr:first-child td { .table-bordered tbody:first-child > tr:first-child td {
border-top: 0; border-top: 0;
} }
.table-bordered thead: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 > td:first-child,
.table-bordered tbody:first-child tr:first-child > th:first-child { .table-bordered tbody:first-child > tr:first-child > th:first-child {
border-top-left-radius: 4px; border-top-left-radius: 4px;
} }
.table-bordered thead: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 > td:last-child,
.table-bordered tbody:first-child tr:first-child > th:last-child { .table-bordered tbody:first-child > tr:first-child > th:last-child {
border-top-right-radius: 4px; border-top-right-radius: 4px;
} }
.table-bordered thead: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 > td:first-child,
.table-bordered tbody:last-child tr:last-child > th: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 > td:first-child,
.table-bordered tfoot:last-child tr:last-child > th:first-child { .table-bordered tfoot:last-child > tr:last-child > th:first-child {
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
} }
.table-bordered thead: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 > td:last-child,
.table-bordered tbody:last-child tr:last-child > th: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 > td:last-child,
.table-bordered tfoot:last-child tr:last-child > th:last-child { .table-bordered tfoot:last-child > tr:last-child > th:last-child {
border-bottom-right-radius: 4px; 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; 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; border-bottom-right-radius: 0;
} }
.table-bordered caption + thead tr:first-child th:first-child, .table-bordered caption + thead > tr:first-child > th:first-child,
.table-bordered caption + tbody tr:first-child td: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 + thead > tr:first-child > th:first-child,
.table-bordered colgroup + tbody tr:first-child td:first-child { .table-bordered colgroup + tbody > tr:first-child > td:first-child {
border-top-left-radius: 4px; border-top-left-radius: 4px;
} }
.table-bordered caption + thead tr:first-child th:last-child, .table-bordered caption + thead > tr:first-child > th:last-child,
.table-bordered caption + tbody tr:first-child td: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 + thead > tr:first-child > th:last-child,
.table-bordered colgroup + tbody tr:first-child td:last-child { .table-bordered colgroup + tbody > tr:first-child > td:last-child {
border-top-right-radius: 4px; border-top-right-radius: 4px;
} }

View File

@ -21,15 +21,17 @@ th {
width: 100%; width: 100%;
margin-bottom: @line-height-base; margin-bottom: @line-height-base;
// Cells // Cells
th, thead > tr > th,
td { tbody > tr > th,
thead > tr > td,
tbody > tr > td {
padding: 8px; padding: 8px;
line-height: @line-height-base; line-height: @line-height-base;
vertical-align: top; vertical-align: top;
border-top: 1px solid @table-border-color; border-top: 1px solid @table-border-color;
} }
// Bottom align for column headings // Bottom align for column headings
thead th { thead > tr > th {
vertical-align: bottom; vertical-align: bottom;
} }
// Remove top border from thead by default // Remove top border from thead by default
@ -58,8 +60,10 @@ th {
// ------------------------------- // -------------------------------
.table-condensed { .table-condensed {
th, thead > tr > th,
td { tbody > tr > th,
thead > tr > td,
tbody > tr > td {
padding: 4px 5px; padding: 4px 5px;
} }
} }
@ -74,70 +78,72 @@ th {
border-collapse: separate; // Done so we can round those corners! border-collapse: separate; // Done so we can round those corners!
border-left: 0; border-left: 0;
border-radius: @border-radius-base; border-radius: @border-radius-base;
th, thead > tr > th,
td { tbody > tr > th,
thead > tr > td,
tbody > tr > td {
border-left: 1px solid @table-border-color; border-left: 1px solid @table-border-color;
} }
// Prevent a double border // Prevent a double border
caption + thead tr:first-child th, caption + thead > tr:first-child th,
caption + tbody tr:first-child th, caption + tbody > tr:first-child th,
caption + tbody tr:first-child td, caption + tbody > tr:first-child td,
colgroup + thead tr:first-child th, colgroup + thead > tr:first-child th,
colgroup + tbody tr:first-child th, colgroup + tbody > tr:first-child th,
colgroup + tbody tr:first-child td, colgroup + tbody > tr:first-child td,
thead:first-child tr:first-child th, thead:first-child > tr:first-child th,
tbody:first-child tr:first-child th, tbody:first-child > tr:first-child th,
tbody:first-child tr:first-child td { tbody:first-child > tr:first-child td {
border-top: 0; border-top: 0;
} }
// For first th/td in the first row in the first thead or tbody // For first th/td in the first row in the first thead or tbody
thead: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 > td:first-child,
tbody:first-child tr:first-child > th:first-child { tbody:first-child > tr:first-child > th:first-child {
border-top-left-radius: @border-radius-base; border-top-left-radius: @border-radius-base;
} }
// For last th/td in the first row in the first thead or tbody // For last th/td in the first row in the first thead or tbody
thead: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 > td:last-child,
tbody:first-child tr:first-child > th:last-child { tbody:first-child > tr:first-child > th:last-child {
border-top-right-radius: @border-radius-base; 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 // 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, thead:last-child > tr:last-child > th:first-child,
tbody:last-child tr:last-child > td:first-child, tbody:last-child > tr:last-child > td:first-child,
tbody:last-child tr:last-child > th: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 > td:first-child,
tfoot:last-child tr:last-child > th:first-child { tfoot:last-child > tr:last-child > th:first-child {
border-bottom-left-radius: @border-radius-base; 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 // 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, thead:last-child > tr:last-child > th:last-child,
tbody:last-child tr:last-child > td:last-child, tbody:last-child > tr:last-child > td:last-child,
tbody:last-child tr:last-child > th: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 > td:last-child,
tfoot:last-child tr:last-child > th:last-child { tfoot:last-child > tr:last-child > th:last-child {
border-bottom-right-radius: @border-radius-base; 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 // 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; 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; border-bottom-right-radius: 0;
} }
// Special fixes to round the left border on the first td/th // Special fixes to round the left border on the first td/th
caption + thead tr:first-child th:first-child, caption + thead > tr:first-child > th:first-child,
caption + tbody tr:first-child td:first-child, caption + tbody > tr:first-child > td:first-child,
colgroup + thead tr:first-child th:first-child, colgroup + thead > tr:first-child > th:first-child,
colgroup + tbody tr:first-child td:first-child { colgroup + tbody > tr:first-child > td:first-child {
border-top-left-radius: @border-radius-base; border-top-left-radius: @border-radius-base;
} }
caption + thead tr:first-child th:last-child, caption + thead > tr:first-child > th:last-child,
caption + tbody tr:first-child td:last-child, caption + tbody > tr:first-child > td:last-child,
colgroup + thead tr:first-child th:last-child, colgroup + thead > tr:first-child > th:last-child,
colgroup + tbody tr:first-child td:last-child { colgroup + tbody > tr:first-child > td:last-child {
border-top-right-radius: @border-radius-base; border-top-right-radius: @border-radius-base;
} }