Skip to content

Instantly share code, notes, and snippets.

@wiinci
Last active January 8, 2016 18:55
Show Gist options
  • Save wiinci/ca931da9ccb992021a5a to your computer and use it in GitHub Desktop.
Save wiinci/ca931da9ccb992021a5a to your computer and use it in GitHub Desktop.
MailChimp Subscriber Table
<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>
.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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment