department-of-veterans-affairs/vets-website

table.responsive {
  font-family: "Open Sans", sans-serif;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;

  th {
    vertical-align: bottom;
  }

  td {
    word-wrap: break-word;
    vertical-align: top;
  }

  td::first-letter {
    text-transform: capitalize;
  }
}

.all-lower {
  display: inline-block;
  text-transform: lowercase;
}

@media screen and (max-width: $medium-screen) {

  table.responsive {
    border: 0;
    thead {
      border: none;
      clip: rect(0, 0, 0, 0);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      width: 1px;
    }

    tr {
      border-bottom: 1px solid var(--vads-color-gray-medium);

      &:first-child {
        border-top: 1px solid var(--vads-color-gray-medium) !important;
      }
    }

    td {
      border: none;
      font-size: 16px;
    }

    td::before {
      /*
  * aria-label has no advantage, it won't be read inside a table
  content: attr(aria-label);
  */
      content: attr(data-label);
      font-weight: bold;
      padding-right: 4px;
      float: left;
    }

    td:last-child {
      border-bottom: 0;
    }
  }
}