// // Tables // -------------------------------------------------- // BASE TABLES // ----------------- table max-width: 100% background-color: $tableBackground border-collapse: collapse border-spacing: 0 // BASELINE STYLES // --------------- .table width: 100% margin-bottom: $baseLineHeight // Cells th, td padding: 8px line-height: $baseLineHeight text-align: left vertical-align: top border-top: 1px solid $tableBorder th font-weight: bold // Bottom align for column headings thead th vertical-align: bottom // Remove top border from thead by default caption + thead tr:first-child th, caption + thead tr:first-child td, colgroup + thead tr:first-child th, colgroup + thead tr:first-child td, thead:first-child tr:first-child th, thead:first-child tr:first-child td border-top: 0 // Account for multiple tbody instances tbody + tbody border-top: 2px solid $tableBorder // Nesting .table background-color: $bodyBackground // CONDENSED TABLE W/ HALF PADDING // ------------------------------- .table-condensed th, td padding: 4px 5px // BORDERED VERSION // ---------------- .table-bordered border: 1px solid $tableBorder border-collapse: separate // Done so we can round those corners! *border-collapse: collapse // IE7 can't round corners anyway border-left: 0 +ctb-border-radius($baseBorderRadius) th, td border-left: 1px solid $tableBorder // 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 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 +ctb-border-top-left-radius($baseBorderRadius) // 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 +ctb-border-top-right-radius($baseBorderRadius) // 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 +ctb-border-bottom-left-radius($baseBorderRadius) // 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 +ctb-border-bottom-right-radius($baseBorderRadius) // 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 +ctb-border-bottom-left-radius(0) tfoot + tbody:last-child tr:last-child td:last-child +ctb-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 +ctb-border-top-left-radius($baseBorderRadius) 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 +ctb-border-top-right-radius($baseBorderRadius) // ZEBRA-STRIPING // -------------- // Default zebra-stripe styles (alternating gray and transparent backgrounds) .table-striped tbody > tr:nth-child(odd) > td, > tr:nth-child(odd) > th background-color: $tableBackgroundAccent // HOVER EFFECT // ------------ // Placed here since it has to come after the potential zebra striping .table-hover tbody tr:hover > td, tr:hover > th background-color: $tableBackgroundHover // TABLE CELL SIZING // ----------------- // Reset default grid behavior table td[class*="span"], table th[class*="span"], .row-fluid table td[class*="span"], .row-fluid table th[class*="span"] display: table-cell float: none // undo default grid column styles margin-left: 0 // undo default grid column styles // Change the column widths to account for td/th padding .table td, .table th &.span1 +ctb-tableColumns(1) &.span2 +ctb-tableColumns(2) &.span3 +ctb-tableColumns(3) &.span4 +ctb-tableColumns(4) &.span5 +ctb-tableColumns(5) &.span6 +ctb-tableColumns(6) &.span7 +ctb-tableColumns(7) &.span8 +ctb-tableColumns(8) &.span9 +ctb-tableColumns(9) &.span10 +ctb-tableColumns(10) &.span11 +ctb-tableColumns(11) &.span12 +ctb-tableColumns(12) // TABLE BACKGROUNDS // ----------------- // Exact selectors below required to override .table-striped .table tbody tr &.success > td background-color: $successBackground &.error > td background-color: $errorBackground &.warning > td background-color: $warningBackground &.info > td background-color: $infoBackground // Hover states for .table-hover .table-hover tbody tr &.success:hover > td background-color: darken($successBackground, 5%) &.error:hover > td background-color: darken($errorBackground, 5%) &.warning:hover > td background-color: darken($warningBackground, 5%) &.info:hover > td background-color: darken($infoBackground, 5%)