frontend/app/assets/stylesheets/archivesspace/tables.scss
/* Styles to support sortable tables */
table {
  thead {
    @include vertical($navbarBackgroundHighlight, $navbarBackground);
    th {
      &.highlighted {
        @include vertical(#f0f7fa, #dcf1fa);
      }

      &.required {
        &::before {
          content: '';
          background-image: asset-url('archivesspace/required_loud.png');
          background-repeat: no-repeat;
          background-position: 2px center;
          padding-right: 16px;
        }
      }

      &.conditionally-required {
        &::before {
          font-family: 'Glyphicons Halflings';
          content: '\002a';
          color: #aaa;
          font-size: 0.8em;
        }
      }
    }
    .col {
      &.primary-type {
        width: 100px;
      }
      &.audit-info {
        min-width: 150px;
      }
      &.actions {
        min-width: 70px;
      }
      &.title {
        min-width: 200px;
      }
    }
  }
  tr {
    background-color: #fff;
  }
  tr.deleted td {
    background-color: $errorBackground !important;
  }
  tr.selected td {
    background-color: $successBackground !important;
  }
  dl {
    margin: 0;
  }
  td {
    /* background-color: #FFF; */
    &.has-error {
      background-color: $errorBackground !important;
      color: $errorText;
    }

    /* allow break of words to ensure table doesn't expand beyond layout */
    word-break: break-word;
  }
  .table-record-actions {
    .btn-group {
      float: right;
    }

    .btn {
      white-space: nowrap;
    }
  }
}

table.table-sortable {
  thead {
    th.sortable {
      padding: 0;
      position: relative;

      > a {
        padding: 4px 5px;
        display: block;
        text-decoration: none !important;

        &::after {
          content: '';
          position: absolute;
          right: 5px;
          top: 1em;
          border-width: 0 4px 4px;
          border-style: solid;
          border-color: #000 transparent;
          visibility: hidden;
        }
      }
      &:hover {
        background-color: $tableBackgroundHover;
      }
    }
    th.sort-desc {
      @include vertical(#f0f7fa, #dcf1fa);

      > a {
        padding-right: 15px;
        &::after {
          visibility: visible;
          @include opacity(60);
        }
      }
    }
    th.sort-asc {
      @include vertical(#f0f7fa, #dcf1fa);

      > a {
        padding-right: 20px;
        &::after {
          visibility: visible;
          @include opacity(60);

          border-bottom: none !important;
          border-left: 4px solid transparent !important;
          border-right: 4px solid transparent !important;
          border-top: 4px solid #000 !important;
        }
      }
    }
  }

  &.table-sortable {
    th.header {
      cursor: pointer;

      &.headerSortUp,
      &.headerSortDown {
        padding-right: 20px;
        position: relative;
        background-color: #e8f5fa;
        background-image: -moz-linear-gradient(top, #f0f7fa, #dcf1fa);
        background-image: -webkit-gradient(
          linear,
          0 0,
          0 100%,
          from(#f0f7fa),
          to(#dcf1fa)
        );
        background-image: -webkit-linear-gradient(top, #f0f7fa, #dcf1fa);
        background-image: -o-linear-gradient(top, #f0f7fa, #dcf1fa);
        background-image: linear-gradient(to bottom, #f0f7fa, #dcf1fa);
      }
      &.headerSortUp::after,
      &.headerSortDown::after {
        content: '';
        position: absolute;
        right: 5px;
        top: 1em;
        border-width: 0 4px 4px;
        border-style: solid;
        border-color: #000 transparent;
      }
      &.headerSortUp::after {
        border-bottom: none !important;
        border-left: 4px solid transparent !important;
        border-right: 4px solid transparent !important;
        border-top: 4px solid #000 !important;
      }
    }
  }
}
.table-audit-cell {
  width: 100px;
}

table.table-spreadsheet {
  width: 100%;
  table-layout: fixed;

  input[type='text'] {
    width: 96%;
    padding-left: 2%;
    padding-right: 2%;
  }
}

.table > thead > tr > th {
  vertical-align: top;
}

/* Fields with linked records should not display markers if there's only one linked record */
.linked-records-listing.count-1 {
  list-style: none;
  padding: 0;
}

.inactive {
  background-color: #ffe6e6 !important;
}

table .col {
  width: fit-content;
}
