tables.less

/*
 * Tables.less
 * Tables for, you guessed it, tabular data
 * ---------------------------------------- */


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

table {
  width: 100%;
  margin-bottom: @baseline;
  padding: 0;
  border-collapse: separate; // Done so we can round those corners!
  *border-collapse: collapse; /* IE7, collapse table to remove spacing */
  font-size: @basefont;
  border: 1px solid #ddd;
  .border-radius(4px);
  th, td {
    padding: 10px 10px 9px;
    line-height: @baseline;
    text-align: left;
  }
  th {
    padding-top: 9px;
    font-weight: bold;
    vertical-align: middle;
    border-bottom: 1px solid #ddd;
  }
  td {
    vertical-align: top;
  }
  th + th,
  td + td {
    border-left: 1px solid #ddd;
  }
  tr td {
    border-top: 1px solid #ddd;
  }
  tr:first-child td {
    border-top: 0;
  }
  tbody tr:first-child td:first-child {
    .border-radius(4px 0 0 0);
  }
  tbody tr:first-child td:last-child {
    .border-radius(0 4px 0 0);
  }
  tbody tr:last-child td:first-child {
    .border-radius(0 0 0 4px);
  }
  tbody tr:last-child td:last-child {
    .border-radius(0 0 4px 0);
  }
}


// TABLE CELL SIZES
// ----------------

// This is a duplication of the main grid .columns() mixin, but subtracts 20px to account for input padding and border
.tableColumns(@columnSpan: 1) {
  width: ((@gridColumnWidth - 20) * @columnSpan) + ((@gridColumnWidth - 20) * (@columnSpan - 1));
}
table {
  // Default columns
  .span1     { .tableColumns(1); }
  .span2     { .tableColumns(2); }
  .span3     { .tableColumns(3); }
  .span4     { .tableColumns(4); }