.tableCore{
  width: 100%;
  background-color:$contentColor;

  td, th {
    padding: $space/4 8px;    // NOTE: 8px (all directions) is Bootstrap default on .table
  }
  thead{border-bottom: solid 5px darken($contentColor, 15%);}
  th {
    font-weight:normal;
    text-align: left;
  }
  tbody{
    tr{
      border-top: solid 1px darken($contentColor, 10%);
      vertical-align: top;

      &:hover{background-color:darken($contentColor, 3%);}
    }
  }
  tr{height:30px;}
  .iconColumn {
    text-align: right;
  }
}
.table{
  @extend .tableCore;

  border:{
    top:solid 3px $firstColor;
    left:solid 1px $thirdColor;
    right:solid 1px $thirdColor;
    bottom:solid 1px $thirdColor;
  }
  // bootstrap introduces a border-bottom on .table>thead>tr>th. We don't do that (border is on thead itself),
  // so revert it
  >thead>tr>th {
    border-bottom: none;
  }
}

table {
  td, th {
    &.iconColumn {
      // Poor .iconColumn catches some undesirable rules from the [class^="icon"] rule
      // in libs/_icons.scss. Defeat those
      display: table-cell !important;
      vertical-align: inherit;
    }
  }
}
