skill-assessment-app/app/assets/stylesheets/molecules/_tables.scss

table {
  border-collapse: collapse;
  margin: $small-spacing 0;
  width: 100%;
}

th {
  border-bottom: 1px solid shade($base-border-color, 25%);
  font-weight: 600;
  padding: $small-spacing 0;
  text-align: left;

  a {
    display: inline-block;
    margin-right: 18px;
    padding-right: 5px;
    position: relative;
    text-decoration: none;

    &::after {
      background-image: asset_data_url("ic_sort_black_24dp_2x.png");
      background-repeat: no-repeat;
      background-size: contain;
      content: "";
      display: block;
      height: 18px;
      left: 100%;
      opacity: 0.5;
      position: absolute;
      top: 4px;
      width: 18px;
    }

    &.asc {
      &::after {
        background-image: asset_data_url("ic_arrow_drop_up_black_24dp_2x.png");
        height: 25px;
        left: calc(100% - 5px);
        opacity: 1;
        top: 1px;
        width: 25px;
      }
    }

    &.desc {
      &::after {
        background-image: asset_data_url("ic_arrow_drop_down_black_24dp_2x.png");
        height: 25px;
        left: calc(100% - 5px);
        opacity: 1;
        top: 1px;
        width: 25px;
      }
    }
  }
}

td {
  padding: $small-spacing 0;
}

tr,
td,
th {
  vertical-align: middle;
}