fix problems with scope in tables when using th in tbody
This commit is contained in:
parent
e025de9a83
commit
7b665affd7
4 changed files with 101 additions and 39 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue