Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Responstable 1.0: a responsive table solution

Responstable 1.0

A responsive table solution

Responstable is a CSS solution for responsive tables. It uses the HTML5 attribute data-th and the pseudo :before to create a alternate column header when in mobile view. Because it is designed mobile first you will need the respond.js (https://github.com/scottjehl/Respond) to make it work with IE8 (and below).

A Pen by Jordy van Raaij on CodePen.

License.

Looking for a slightly different solution? Please check out Responstable 2.0!

<h1>Responstable <span>1.0</span> by <span>jordyvanraaij</span></h1>
<table class="responstable">
<tr>
<th>Main driver</th>
<th>First name</th>
<th>Surname</th>
<th>Date of birth</th>
<th>Relationship</th>
</tr>
<tr>
<td data-th="Main driver"><input type="radio"/></td>
<td data-th="First name">Steve</td>
<td data-th="Surname">Foo</td>
<td data-th="Date of birth">01/01/1978</td>
<td data-th="Relationship">Policyholder</td>
</tr>
<tr>
<td data-th="Main driver"><input type="radio"/></td>
<td data-th="First name">Steffie</td>
<td data-th="Surname">Foo</td>
<td data-th="Date of birth">01/01/1978</td>
<td data-th="Relationship">Spouse</td>
</tr>
<tr>
<td data-th="Main driver"><input type="radio"/></td>
<td data-th="First name">Stan</td>
<td data-th="Surname">Foo</td>
<td data-th="Date of birth">01/01/1994</td>
<td data-th="Relationship">Son</td>
</tr>
<tr>
<td data-th="Main driver"><input type="radio"/></td>
<td data-th="First name">Stella</td>
<td data-th="Surname">Foo</td>
<td data-th="Date of birth">01/01/1992</td>
<td data-th="Relationship">Daughter</td>
</tr>
</table>
@import "compass";
/*
RESPONSTABLE 1.0 by jordyvanraaij
Designed mobile first!
*/
// Default options for table style
$table-breakpoint: 480px;
$table-background-color: #FFF;
$table-text-color: #024457;
$table-outer-border: 1px solid #167F92;
$table-cell-border: 1px solid #D9E4E6;
// Extra options for table style (parse these arguments when including your mixin)
$table-border-radius: 10px;
$table-highlight-color: #EAF3F3;
$table-header-background-color: #167F92;
$table-header-text-color: #FFF;
$table-header-border: 1px solid #FFF;
// The Responstable mixin
@mixin responstable(
$breakpoint: $table-breakpoint,
$background-color: $table-background-color,
$text-color: $table-text-color,
$outer-border: $table-outer-border,
$cell-border: $table-cell-border,
$border-radius: none,
$highlight-color: none,
$header-background-color: $table-background-color,
$header-text-color: $table-text-color,
$header-border: $table-cell-border) {
.responstable {
margin: 1em 0;
width: 100%;
background: $background-color;
color: $text-color;
border-radius: $border-radius;
border: $outer-border;
overflow: hidden;
tr {
border-top: $outer-border;
border-bottom: $outer-border;
&:nth-child(odd) {
background-color: $highlight-color;
}
}
th {
display: none; // hide the table headers for mobile
border: $header-border;
background-color: $header-background-color;
color: $header-text-color;
}
td {
display: block; // display the table as a block element for mobile
&:first-child {
padding-top: .5em;
}
&:last-child {
padding-bottom: .5em;
}
&:before {
content: attr(data-th)": "; // grab the headers from the data-th and put them before every table cell for mobile
font-weight: bold;
width: 8em;
display: inline-block;
@media (min-width: $breakpoint) {
display: none; // do not display the data-th for desktop
}
}
@media (min-width: $breakpoint) {
border: $cell-border;
}
}
th, td {
text-align: left;
margin: .5em 1em;
@media (min-width: $breakpoint) {
display: table-cell; // turn the table into a 'normal' table-cell for desktop
padding: 1em;
&:first-child {
text-align: center;
}
}
}
}
}
// Include the mixin (with extra options as overrides)
@include responstable(
$border-radius: $table-border-radius,
$highlight-color: $table-highlight-color,
$header-background-color: $table-header-background-color,
$header-text-color: $table-header-text-color,
$header-border: $table-header-border);
// General styles
body {
padding: 0 2em;
font-family: Arial, sans-serif;
color: #024457;
background: #f2f2f2;
}
h1 {
font-family: Verdana;
font-weight: normal;
color: #024457;
span {color: #167F92;}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment