bkdotcom/PHPDebugConsole

$hover-bg: rgba(0, 0, 0, 0.075);
$hover-fg: #212529;

table {
  width: auto;
  border-collapse: collapse;
  caption {
    caption-side: top;
    font-weight: bold;
    font-style: italic;
    padding-bottom: 0;
    padding-top: 2px;
    text-align: left;
  }
  th,
  td {
    padding: 0 0.25em;
    vertical-align: top;
  }
  th {
    &.t_key {
      white-space: nowrap;
      &::before,
      &::after { content: none; }
    }
  }
  td {
    &.classname { font-weight: bold; }
    &.t_undefined {
      background-color: rgba(0, 0, 0, 0.1);
      &::after { content: none; }
    }
  }
  th,
  tfoot td {
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.1);
  }
  thead th {
    text-align: center;
    .classname {
      opacity: 0.5;
      font-style: italic;
      &::before { content: "("; }
      &::after { content: ")"; }
    }
  }
  tr[data-toggle] {
    cursor: default;
    &:hover {
      color: $hover-fg;
      background-color: $hover-bg;
    }
  }
  tbody th.t_int,
  td[data-type-more=numeric],
  td.timestamp,
  td.t_int {
    text-align: right;
    white-space: nowrap;
  }
  &.table-bordered {
    th,
    td {
      border: 1px solid #7f7f7f;
      padding: 1px 0.25em;
    }
  }
}

table.table-hover {
  tbody {
    tr {
      cursor: default;
      &:hover {
        color: $hover-fg;
        background-color: $hover-bg;
      }
    }
  }
}

// sortable table
table.table-sort {
  > thead th {
    cursor: default;
    &:hover { background-color: rgba(0, 0, 0, 0.25); }
  }
  .sort-arrows {
    text-align: center;
    height: 1.5em;
    width: 1.2em;
    margin-left: 0;
    margin-right: 1px;
    .fa {
      position: absolute;
      opacity: 0.33;
    }
    .fa-caret-down { bottom: 0; }
    .fa-caret-up { top: -1px; }
  }
  .sort-asc .fa-caret-down { opacity: 1; }
  .sort-desc .fa-caret-up { opacity: 1; }
}

table.trace-context {
  width: 100%;
  tr.context {
    display: none;
    td {
      color: $default-fg;
      max-width: 1px;   // prevents content expanding ¯\_(ツ)_/¯
      background-color: #f5f2f0;
      padding: 0.75em;
      hr {
        margin: 1em 0;
      }
    }
  }
}