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;
}
.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;
}

View File

@ -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;
}