// // Tables // -------------------------------------------------- table { max-width: 100%; background-color: @table-bg; } th { text-align: left; } // BASELINE STYLES // --------------- .table { width: 100%; margin-bottom: @line-height-computed; // Cells thead, tbody, tfoot { > tr { > th, > td { padding: 8px; line-height: @line-height-base; vertical-align: top; border-top: 1px solid @table-border-color; } } } // Bottom align for column headings thead > tr > th { vertical-align: bottom; } // Remove top border from thead by default caption + thead, colgroup + thead, thead:first-child { tr:first-child { th, td { border-top: 0; } } } // Account for multiple tbody instances tbody + tbody { border-top: 2px solid @table-border-color; } // Nesting .table { background-color: @body-bg; } } // CONDENSED TABLE W/ HALF PADDING // ------------------------------- .table-condensed { thead, tbody, tfoot { > tr { > th, > td { padding: 4px 5px; } } } } // BORDERED VERSION // ---------------- .table-bordered { border: 1px solid @table-border-color; border-collapse: separate; // Done so we can round those corners! border-left: 0; border-radius: @border-radius-base; > thead, > tbody, > tfoot { > tr { > th, > 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 { border-top: 0; } > thead:first-child > tr:first-child > th, > tbody:first-child > tr:first-child > td, > tbody:first-child > tr:first-child > th { // For first th/td in the first row in the first thead or tbody &:first-child{ border-top-left-radius: @border-radius-base; } // For last th/td in the first row in the first thead or tbody &:last-child{ border-top-right-radius: @border-radius-base; } } > thead:last-child > tr:last-child > th, > tbody:last-child > tr:last-child > td, > tbody:last-child > tr:last-child > th, > tfoot:last-child > tr:last-child > td, > tfoot:last-child > tr:last-child > th { // For first th/td (can be either) in the last row in the last thead, tbody, and tfoot &: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 &: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 { border-bottom-left-radius: 0; } > 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, > colgroup { + thead > tr:first-child > th, + tbody > tr:first-child > td { &:first-child { border-top-left-radius: @border-radius-base; } &:last-child { border-top-right-radius: @border-radius-base; } } } } // ZEBRA-STRIPING // -------------- // Default zebra-stripe styles (alternating gray and transparent backgrounds) .table-striped { > tbody { > tr:nth-child(odd) { > td, > th { background-color: @table-bg-accent; } } } } // HOVER EFFECT // ------------ // Placed here since it has to come after the potential zebra striping .table-hover { > tbody { > tr:hover { > td, > th { background-color: @table-bg-hover; } } } } // TABLE CELL SIZING // ----------------- // Reset default table behavior table col[class^="col-"] { float: none; display: table-column; } table { td, th { &[class^="col-"] { float: none; display: table-cell; } } } // TABLE BACKGROUNDS // ----------------- // Exact selectors below required to override .table-striped .table > tbody > tr { > td.success, > th.success, &.success > td { background-color: @state-success-bg; border-color: @state-success-border; } > td.danger, > th.danger, &.danger > td { background-color: @state-danger-bg; border-color: @state-danger-border; } > td.warning, > th.warning, &.warning > td { background-color: @state-warning-bg; border-color: @state-warning-border; } } // Hover states for .table-hover .table-hover > tbody > tr { > td.success:hover, > th.success:hover, &.success:hover > td { background-color: darken(@state-success-bg, 5%); border-color: darken(@state-success-border, 5%); } > td.danger:hover, > th.danger:hover, &.danger:hover > td { background-color: darken(@state-danger-bg, 5%); border-color: darken(@state-danger-border, 5%); } > td.warning:hover, > th.warning:hover, &.warning:hover > td { background-color: darken(@state-warning-bg, 5%); border-color: darken(@state-warning-border, 5%); } }