Cacher is the code snippet organizer for pro developers

/* --------------------------
 * TABLE STYLING
 * -------------------------- */
$table-background-color: $color-white;
$table-background-color-even: $color-light-grey;
$table-cell-border-color: $color-mid-grey;

$thead-background-color: $color-dark-blue;
$thead-text-color: $color-white;

$tfoot-background-color: $color-white;

table {
  width: 100%;
  margin: 0 0 46px;
  text-align: center;

  thead {
    border-right: 1px solid $thead-background-color;
    border-left: 1px solid $thead-background-color;

    th {
      padding: 15px;
      text-align: center;
    }
  }

  tbody {
    border-right: 1px solid $table-cell-border-color;
    border-bottom: 1px solid $table-cell-border-color;
    border-left: 1px solid $table-cell-border-color;
    tr {
      position: relative;
      overflow: hidden;
      &:nth-child(even) {
        background-color: $table-background-color-even;
      }

      td {
        padding: 15px;
        border-right: 1px solid $table-cell-border-color;
        border-left: 1px solid $table-cell-border-color;
      }
    }
  }
  
  tfoot {
    background-color: $tfoot-background-color;
    
    th {
      padding: 10px 0;
      font-size: 12px;
      font-style: italic;
      text-align: right;
    }
  }

  /* --------------------------
   * RESPONSIVE TABLE STYLING
   * -------------------------- */

  &.responsive-table {
    thead {
      @include respond-to(tablet-portrait) {
        display: none;
      }
    }

    tbody {
      @include respond-to(tablet-portrait) {
        margin-bottom: 10px;
        border: 1px solid black;
        overflow: hidden;
      }

      tr {
        @include respond-to(tablet-portrait) {
          display: block;
          margin-bottom: 0;
          padding: 20px 10px;
          &:nth-child(odd) {
            background-color: white;
          }
          &:nth-child(even) {
            background-color: black;
          }
        }

        td {
          @include respond-to(tablet-portrait) {
            display: block;
            text-align: center;
            border: none;

            &:first-child {
              font-weight: normal;
            }
          }

          &:after {
            @include respond-to(tablet-portrait) {
              display: none;
            }
          }

          &:before {
            @include respond-to(tablet-portrait) {
              content: attr(data-heading);
              display: block;
              margin-bottom: 5px;
            }
          }
        }
      }
    }
    tfoot {
      th {
        @include respond-to(tablet-portrait) {
          text-align: center;
        }
      }
    }
  }
}