// // 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: @table-cell-padding; 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; border-bottom: 2px solid @table-border-color; } // 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: @table-condensed-cell-padding; } } } } // Bordered version // // Add borders all around the table and between all the columns. .table-bordered { border: 1px solid @table-border-color; > thead, > tbody, > tfoot { > tr { > th, > td { border: 1px solid @table-border-color; } } } > thead { > tr { > th, > td { border-bottom-width: 2px; } } } } // 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` and prevent // inheritance to nested tables. .table > thead > tr, .table > tbody > tr, .table > tfoot > tr { > td.active, > th.active, &.active > td, &.active > th { background-color: @table-bg-active; } } // Generate the contextual variants .table-row-variant(success; @state-success-bg; @state-success-border); .table-row-variant(danger; @state-danger-bg; @state-danger-border); .table-row-variant(warning; @state-warning-bg; @state-warning-border); // Responsive tables // // Wrap your tables in `.table-scrollable` and we'll make them mobile friendly // by enabling horizontal scrolling. Only applies <768px. Everything above that // will display normally. @media (max-width: @screen-sm) { .table-responsive { width: 100%; margin-bottom: 15px; overflow-y: hidden; overflow-x: scroll; border: 1px solid @table-border-color; // Tighten up spacing and give a background color > .table { margin-bottom: 0; background-color: #fff; // Ensure the content doesn't wrap > thead, > tbody, > tfoot { > tr { > th, > td { white-space: nowrap; } } } } // Special overrides for the bordered tables > .table-bordered { border: 0; // Nuke the appropriate borders so that the parent can handle them > thead, > tbody, > tfoot { > tr { > th:first-child, > td:first-child { border-left: 0; } > th:last-child, > td:last-child { border-right: 0; } } > tr:last-child { > th, > td { border-bottom: 0; } } } } } }