site/_sass/tables.scss

// Bootstrap requires tables to carry a .table class in order for styling to
// be applied. However, redcarpet emits table elements without the class and
// it is not possible to customize it.
//
// Ideally, we would use a SASS directive to make the table element inherit
// the formatting defined by the bootstrap templates... but we cannot do so
// at the moment because we don't build bootstrap ourselves from its SASS
// sources. Therefore, this file just borrows the minimal amount of code
// from bootstrap 3.3.7 to render tables nicely.

caption {
  padding-top: $table-cell-padding;
  padding-bottom: $table-cell-padding;
  color: $text-muted;
  text-align: left;
}

th {
  text-align: left;
}

// Baseline styles

table {
  background-color: $table-bg;
  width: 100%;
  max-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;
  }
}