fix problems with scope in tables when using th in tbody

This commit is contained in:
Mark Otto
2011-10-08 00:14:38 -07:00
parent e025de9a83
commit 7b665affd7
4 changed files with 101 additions and 39 deletions

View File

@@ -11,11 +11,8 @@ table {
width: 100%;
margin-bottom: @baseline;
padding: 0;
border-collapse: separate; // Done so we can round those corners!
*border-collapse: collapse; /* IE7, collapse table to remove spacing */
font-size: @basefont;
border: 1px solid #ddd;
.border-radius(4px);
border-collapse: collapse;
th, td {
padding: 10px 10px 9px;
line-height: @baseline;
@@ -29,9 +26,27 @@ table {
}
td {
vertical-align: top;
border-top: 1px solid #ddd;
}
// When scoped to row, fix th in tbody
tbody th {
border-bottom: 0;
vertical-align: top;
}
}
// BORDERED VERSION
// ----------------
.bordered-table {
border: 1px solid #ddd;
border-collapse: separate; // Done so we can round those corners!
*border-collapse: collapse; /* IE7, collapse table to remove spacing */
.border-radius(4px);
th + th,
td + td {
td + td,
th + td {
border-left: 1px solid #ddd;
}
tr td {
@@ -89,10 +104,12 @@ table {
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
.zebra-striped {
tbody {
tr:nth-child(odd) td {
tr:nth-child(odd) td,
tr:nth-child(odd) th {
background-color: #f9f9f9;
}
tr:hover td {
tr:hover td,
tr:hover th {
background-color: #f5f5f5;
}
}