Mobile Friendly Table Styles

table.css

@media (max-width: 768px) {
  .table-collapse {
    width: 100%;
    & > tfoot,
    & > thead {
      display: none;
    }
    & > tbody,
    & > tbody > tr,
    & > tbody > tr > td,
    & > tbody > tr > th {
      display: block;
      width: auto;
    }
    & > tbody > tr {
      padding-top: 0.5em;
      padding-bottom: 0.5em;
      & > th {
        border: none !important;
        padding: 0.25em 0.5em;
        text-align: left !important;
        &:first-child {
          padding-left: 0.5em;
        }
        &:last-child {
          padding-right: 0.5em;
        }
      }
      & > td {
        border: none !important;
        padding: 0.25em 0.5em 0.25em 35%;
        box-shadow: none !important;
        text-align: left !important;
        position: relative;
        &:first-child {
          padding-left: 35%;
        }
        &:last-child {
          padding-right: 0.5em;
        }
        &::before {
          content: attr(data-heading);
          position: absolute;
          top: 0.25em;
          left: 0.5em;
          width: 35%;
          padding-right: 0.25em;
          white-space: nowrap;
          z-index: 1;
        }
      }
    }
  }
}