twitter/bootstrap — Issue #435: TH elements in tbody are styled incorrectly
Author: twoolie
Created: 2011-10-17 02:48:01+00:00
State: open

putting th elements in tbody (i.e. when you want to have a vertical table of keys and values) are styled with their border-bottom incorrect and incorrect padding.

These style changes in tables.less should fix it.

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);
th, td {
padding: 10px 10px 9px;
line-height: @baseline;
text-align: left;
}
th {
font-weight: bold;
vertical-align: middle;
}
thead th {
padding-top: 9px;
border-bottom: 1px solid #ddd;
}
td {
vertical-align: top;
}
th, td {
&:not(:first-child) {
border-left: 1px solid #ddd;
}
}
tr:not(:first-child)
th, td {
border-top: 1px solid #ddd;
}
}
tbody {
tr:first-child {
th, td {
&:first-child {
.border-radius(4px 0 0 0);
}
&:last-child {
.border-radius(0 4px 0 0);
}
}
}
tr:last-child {
th, td {
&:first-child {
.border-radius(0 0 0 4px);
}
td:last-child {
.border-radius(0 0 4px 0);
}
}
}
}
}

// ZEBRA-STRIPING
// --------------

// Default zebra-stripe styles (alternating gray and transparent backgrounds)
.zebra-striped {
tbody {
tr:nth-child(odd) {
th, td {
background-color: #f9f9f9;
}
}
tr:hover {
th, td {
background-color: #f5f5f5;
}
}
}
}

Sorry I can't submit a pull, NPM fails on my system so I can't submit compiled .css files as required.