info@53: //
info@53: // Tables
info@53: // --------------------------------------------------
info@53:
info@53:
info@53: table {
info@53: max-width: 100%;
info@53: background-color: @table-bg;
info@53: }
info@53: th {
info@53: text-align: left;
info@53: }
info@53:
info@53:
info@53: // Baseline styles
info@53:
info@53: .table {
info@53: width: 100%;
info@53: margin-bottom: @line-height-computed;
info@53: // Cells
info@53: > thead,
info@53: > tbody,
info@53: > tfoot {
info@53: > tr {
info@53: > th,
info@53: > td {
info@53: padding: @table-cell-padding;
info@53: line-height: @line-height-base;
info@53: vertical-align: top;
info@53: border-top: 1px solid @table-border-color;
info@53: }
info@53: }
info@53: }
info@53: // Bottom align for column headings
info@53: > thead > tr > th {
info@53: vertical-align: bottom;
info@53: border-bottom: 2px solid @table-border-color;
info@53: }
info@53: // Remove top border from thead by default
info@53: > caption + thead,
info@53: > colgroup + thead,
info@53: > thead:first-child {
info@53: > tr:first-child {
info@53: > th,
info@53: > td {
info@53: border-top: 0;
info@53: }
info@53: }
info@53: }
info@53: // Account for multiple tbody instances
info@53: > tbody + tbody {
info@53: border-top: 2px solid @table-border-color;
info@53: }
info@53:
info@53: // Nesting
info@53: .table {
info@53: background-color: @body-bg;
info@53: }
info@53: }
info@53:
info@53:
info@53: // Condensed table w/ half padding
info@53:
info@53: .table-condensed {
info@53: > thead,
info@53: > tbody,
info@53: > tfoot {
info@53: > tr {
info@53: > th,
info@53: > td {
info@53: padding: @table-condensed-cell-padding;
info@53: }
info@53: }
info@53: }
info@53: }
info@53:
info@53:
info@53: // Bordered version
info@53: //
info@53: // Add borders all around the table and between all the columns.
info@53:
info@53: .table-bordered {
info@53: border: 1px solid @table-border-color;
info@53: > thead,
info@53: > tbody,
info@53: > tfoot {
info@53: > tr {
info@53: > th,
info@53: > td {
info@53: border: 1px solid @table-border-color;
info@53: }
info@53: }
info@53: }
info@53: > thead > tr {
info@53: > th,
info@53: > td {
info@53: border-bottom-width: 2px;
info@53: }
info@53: }
info@53: }
info@53:
info@53:
info@53: // Zebra-striping
info@53: //
info@53: // Default zebra-stripe styles (alternating gray and transparent backgrounds)
info@53:
info@53: .table-striped {
info@53: > tbody > tr:nth-child(odd) {
info@53: > td,
info@53: > th {
info@53: background-color: @table-bg-accent;
info@53: }
info@53: }
info@53: }
info@53:
info@53:
info@53: // Hover effect
info@53: //
info@53: // Placed here since it has to come after the potential zebra striping
info@53:
info@53: .table-hover {
info@53: > tbody > tr:hover {
info@53: > td,
info@53: > th {
info@53: background-color: @table-bg-hover;
info@53: }
info@53: }
info@53: }
info@53:
info@53:
info@53: // Table cell sizing
info@53: //
info@53: // Reset default table behavior
info@53:
info@53: table col[class*="col-"] {
info@53: position: static; // Prevent border hiding in Firefox and IE9/10 (see https://github.com/twbs/bootstrap/issues/11623)
info@53: float: none;
info@53: display: table-column;
info@53: }
info@53: table {
info@53: td,
info@53: th {
info@53: &[class*="col-"] {
info@53: float: none;
info@53: display: table-cell;
info@53: }
info@53: }
info@53: }
info@53:
info@53:
info@53: // Table backgrounds
info@53: //
info@53: // Exact selectors below required to override `.table-striped` and prevent
info@53: // inheritance to nested tables.
info@53:
info@53: // Generate the contextual variants
info@53: .table-row-variant(active; @table-bg-active);
info@53: .table-row-variant(success; @state-success-bg);
info@53: .table-row-variant(danger; @state-danger-bg);
info@53: .table-row-variant(warning; @state-warning-bg);
info@53:
info@53:
info@53: // Responsive tables
info@53: //
info@53: // Wrap your tables in `.table-responsive` and we'll make them mobile friendly
info@53: // by enabling horizontal scrolling. Only applies <768px. Everything above that
info@53: // will display normally.
info@53:
info@53: @media (max-width: @screen-xs-max) {
info@53: .table-responsive {
info@53: width: 100%;
info@53: margin-bottom: (@line-height-computed * 0.75);
info@53: overflow-y: hidden;
info@53: overflow-x: scroll;
info@53: -ms-overflow-style: -ms-autohiding-scrollbar;
info@53: border: 1px solid @table-border-color;
info@53: -webkit-overflow-scrolling: touch;
info@53:
info@53: // Tighten up spacing
info@53: > .table {
info@53: margin-bottom: 0;
info@53:
info@53: // Ensure the content doesn't wrap
info@53: > thead,
info@53: > tbody,
info@53: > tfoot {
info@53: > tr {
info@53: > th,
info@53: > td {
info@53: white-space: nowrap;
info@53: }
info@53: }
info@53: }
info@53: }
info@53:
info@53: // Special overrides for the bordered tables
info@53: > .table-bordered {
info@53: border: 0;
info@53:
info@53: // Nuke the appropriate borders so that the parent can handle them
info@53: > thead,
info@53: > tbody,
info@53: > tfoot {
info@53: > tr {
info@53: > th:first-child,
info@53: > td:first-child {
info@53: border-left: 0;
info@53: }
info@53: > th:last-child,
info@53: > td:last-child {
info@53: border-right: 0;
info@53: }
info@53: }
info@53: }
info@53:
info@53: // Only nuke the last row's bottom-border in `tbody` and `tfoot` since
info@53: // chances are there will be only one `tr` in a `thead` and that would
info@53: // remove the border altogether.
info@53: > tbody,
info@53: > tfoot {
info@53: > tr:last-child {
info@53: > th,
info@53: > td {
info@53: border-bottom: 0;
info@53: }
info@53: }
info@53: }
info@53:
info@53: }
info@53: }
info@53: }