Bootstrap/less/tables.less

//
// Tables
// --------------------------------------------------


table {
  max-width: 100%;
  background-color: @table-bg;
}
th {
  text-align: left;
}


// BASELINE STYLES
// ---------------

.table {
  width: 100%;
  margin-bottom: @line-height-base;
  // Cells
  thead > tr > th,
  tbody > tr > th,
  thead > tr > td,
  tbody > tr > 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 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 @table-border-color;
  }

  // Nesting
  .table {
    background-color: @body-bg;
  }
}



// CONDENSED TABLE W/ HALF PADDING
// -------------------------------

.table-condensed {
  thead > tr > th,
  tbody > tr > th,
  thead > tr > td,
  tbody > tr > 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 > tr > th,
  > tbody > tr > th,
  > thead > tr > td,
  > tbody > tr > 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;
  }
  // 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 {
    border-top-left-radius: @border-radius-base;
  }
  // 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 {
    border-top-right-radius: @border-radius-base;
  }
  // 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 {
    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
  > 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 {
    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 + 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 {
    border-top-left-radius: @border-radius-base;
  }
  > 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 {
    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,
    > tr:nth-child(odd) > 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,
    > tr:hover > th {
      background-color: @table-bg-hover;
    }
  }
}



// TABLE CELL SIZING
// -----------------

// Reset default table behavior
table col[class*="col-span-"] {
  float: none;
  display: table-column;
}
table td[class*="col-span-"],
table th[class*="col-span-"] {
  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%);
  }
}