MailChimp Subscriber Table

mc-subscriber-table.html

<div class="st-wrapper">
  <div class="st-content">
    <table class="st">
      <thead>
        <tr>
          <th class="v-head"></th>
          <th></th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="v-head"></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td class="v-head"></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td class="v-head"></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>  
      </thead>
    </table>
  </div>
</div>

mc-subscriber-table.less

.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.transform(@string) {
    -webkit-transform: @string;
    -moz-transform: @string;
    -ms-transform: @string;
    -o-transform: @string;
    transform: @string;
}

@fixedColWidth: 265px;
@hHeadWidth: @fixedColWidth;
@baseGray: #f2f2f2;
@phone: 640px;
@radius: 6px;

.st-wrapper {
    -webkit-overflow-scrolling: touch;
    position:relative;
    border-radius: @radius;
    margin: 0px 15px;
    border: 1px solid darken(@baseGray, 13.5%);
    * {
        vertical-align: top;
    }
}
.st-content {
    border-radius: 0 @radius @radius 0;
    -webkit-overflow-scrolling: touch;
    @media only screen and (max-width:@phone) {
        border-radius: @radius 0 0;
    }
}
.st {
    width: 100%;
    font-size: 15px;
    table-layout: auto;
    overflow-x: auto;
    display: block;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    border-radius: @radius;
    background-color: darken(@baseGray, 7%);
    td,
    th {
        line-height: 27px;
        height: 60px;
        padding: 15px;
        border-top: 1px dotted darken(@baseGray, 13.5%);
        text-align: left;
        display: inline-block;
        width: 140px;
        .text-overflow();
    }
    td {
        overflow-y: auto;
    }
    .v-head {
        position: absolute;
        overflow-y: hidden;
        left: 0;
        width: @hHeadWidth;
        max-width: @hHeadWidth;
        font-weight: 500;
        background-color: @baseGray;
        border-right: 1px solid darken(@baseGray, 13.5%);
        z-index: 0;
        .transform(translateZ(1px));
        + td,
        + th {
            margin-left: @fixedColWidth;
        }
        @media only screen and (max-width:@phone) {
            position:relative;
            left: 0;
            + td,
            + th {
                margin-left: 0;
            }
        }
    }
    thead {
        font-weight: 500;
        background-color: darken(@baseGray, 7%);
        display: block;
        .v-head {
            background-color: darken(@baseGray, 7%);
        }
    }
    tbody {
        background-color: #fff;
    }
}