18F/State-TalentMAP

$tm-table-blue: $primary-blue-darkest;
 
.tm-table {
  $border-visible-height: 500%;
 
  $border-radius: 9px;
  color: $primary-base;
  margin-bottom: 0;
  table-layout: fixed;
  width: 100%;
 
  .column-title-sub,
  .column-title-link {
    font-weight: 300;
  }
 
  .column-title-link {
    font-size: 1.6rem;
 
    a {
      color: $color-white;
    }
  }
 
  th,
  td {
    border: 0;
    word-wrap: break-word;
  }
 
  thead {
    background: $tm-table-blue;
    color: $color-white;
 
    .border-extension {
      height: 1px;
    }
 
    .border-visible {
      background: $tm-table-blue;
      height: $border-visible-height;
      left: -300px;
      position: absolute;
      top: 0;
      width: 2000px;
      z-index: -100;
    }
 
    th {
      background: inherit;
      font-size: 1.9rem;
      font-weight: 500;
      line-height: 1.6;
      padding-bottom: 2.5rem;
      padding-top: 2.5rem;
      position: relative;
    }
 
    th:first-of-type {
      padding-top: 2.4rem;
      vertical-align: top;
    }
  }
 
  tbody {
    position: relative;
 
    .border-extension-layer-2 {
      height: 1px;
    }
 
    .border-visible-layer-2 {
      background: $color-white;
      height: $border-visible-height + 500%;
      left: -300px;
      position: absolute;
      top: 0;
      width: 2000px;
      z-index: -50;
    }
 
    .border-extension {
      height: 1px;
    }
 
    .border-visible {
      background: $tm-table-blue;
      height: 1px;
      left: -300px;
      position: relative;
      top: 16px;
      width: 2000px;
    }
 
    tr:first-of-type {
      th,
      td {
        padding-top: 1.5em;
      }
    }
 
    th:first-of-type {
      position: relative;
    }
 
    th {
      background-color: $color-white;
      padding-bottom: 1em;
      padding-right: 1em;
      width: 18%;
    }
 
    td {
      border-left: 1px solid $tm-table-blue;
    }
  }
}
 
.tm-header-no-columns {
  tr:first-child {
    th {
      padding: 1em;
    }
  }
}