.responsive-table {
  table {
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    width: 100%;
    table-layout: fixed;

    th {
      font-weight: inherit;
    }
  }
}

@media only screen and (max-width: 767px) {
  .responsive-table {
    table {
      border: 0;
      thead {
        border: none;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
      }

      tr {
        display: block;
        margin-bottom: 0.5rem;
        border-bottom: 1px solid $hr-border-color;
      }

      td {
        display: block;
        margin-bottom: 0.5rem;
        &::before {
          /*
          * aria-label has no advantage, it won't be read inside a table
          content: attr(aria-label);
          */
          content: attr(data-label);
          float: left;
        }
      }
    }
  }
}