Responsive Table

Html for a responsive Table

<table class=”twek-table”>

<tr>

<th>Content Headline1</th>

<th>Content Headline2</th>

<th>Content Headline3</th>

<th>Content Headline4</th>

<th>Content Headline5</th>

</tr>

<tr>

<td data-th=”Content Headline1″>Content</td>

<td data-th=”Content Headline2″>Content</td>

<td data-th=”Content Headline3″>Content</td>

<td data-th=”Content Headline4″>Content</td>

<td data-th=”Content Headline5″>Content</td>

</tr>

</table>

 

CSS for a responsive table

.twek-table {

margin: 1em 0;

min-width: 100%;

}

.twek-table tr {

border-top: 1px solid #D7D7D7;

border-bottom: 1px solid #D7D7D7;

}

.twek-table th {

display: none;

}

.twek-table td {

display: block;

}

.twek-table td:first-child {

padding-top: .5em;

}

.twek-table td:last-child {

padding-bottom: .5em;

}

.twek-table td:before {

content: attr(data-th) “: “;

font-weight: bold;

width: 6.5em;

display: inline-block;

}

@media (min-width: 480px) {

.twek-table td:before {

display: none;

}

}

.twek-table th, .twek-table td {

text-align: left;

}

@media (min-width: 480px) {

.twek-table th, .twek-table td {

display: table-cell;

padding: .25em .5em;

}

.twek-table th:first-child, .twek-table td:first-child {

padding-left: 0;

}

.twek-table th:last-child, .twek-table td:last-child {

padding-right: 0;

}

}

.twek-table {

background: #353535;

color: #fff;

border-radius: .4em;

overflow: hidden;

}

.twek-table tr {

border-color: #D7D7D7;

}

.twek-table th, .twek-table td {

margin: .5em 1em;

}

@media (min-width: 480px) {

.twek-table th, .twek-table td {

padding: 1em !important;

}

}

.twek-table th, .twek-table td:before {

color: #dd5;

}