A collection of techniques for responsive tables

table2.sass

.c-table
  +half-spacing(margin-bottom)
  +text-copy-s
  vertical-align: top

  td,
  th
    +medium-spacing(padding)
    vertical-align: top
    border-bottom: 1px solid $border-color
    padding-right: 0
    padding-left: 0
    +respond-to(medium)
      +default-spacing(padding-right)
      +default-spacing(padding-left)

  th
    +between(0, medium)
      border-bottom: 0
    +text-copy
    font-weight: 600
    +respond-to(medium)
      +text-copy-xs

  td
    +between(0, medium)
      &::before
        +text-copy-xs
        content: attr(data-key)
        display: block
        font-weight: 600

  thead
    th
      border-bottom: 2px solid $border-color
      padding-top: 0
    +between(0, medium)
      display: none

  tbody
    th
      +default-spacing(margin-top)
      +respond-to(medium)
        margin-top: 0
        text-align: right

    th,
    td
      +fast-transition(background)
      +between(0, medium)
        display: block

    +respond-to(medium)
      tr:nth-child(even)
        & > td,
        & > th
          background: $white-grey

    tr:hover
      & > td,
      & > th
        background: transparentize($accent-color, 0.95)

tables.sass

table
  width: 100%
  thead
    color: $font-color
    td
      border:
        bottom: 1px solid $dark-grey
      &.no-border
        border-bottom: 0
        text-align: right
        padding: 0
  td, th
    padding: 8px
    &.ancillary, &.optional
      display: none
    &.essential
      display: table-cell
  +media(min-width 801px)
    td, th
      &.optional
        display: table-cell
  +media(min-width 1025px)
    td, th
      &.ancillary
        display: table-cell
  td
    border:
      right: 1px solid $light-grey
      bottom: 1px solid $light-grey
    &:first-child
      border-left: 0px
    &:last-child
      border-right: 0px
  th
    height: 45px
    line-height: 9px

    border:
      bottom: 1px solid $dark-grey
      right: 1px solid $medium-grey
    &:last-child
      border-right: 0px
  tr
    &:nth-child(even)
      background: $light-grey