Skip to content

Instantly share code, notes, and snippets.

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

Responstable 2.0

A responsive table solution

Responstable is a CSS solution for responsive tables. It uses the HTML5 attribute data-th and the pseudo :after 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 1.0!

<h1>Responstable <span>2.0</span> by <span>jordyvanraaij</span></h1>
<table class="responstable">
<tr>
<th>Main driver</th>
<th data-th="Driver details"><span>First name</span></th>
<th>Surname</th>
<th>Date of birth</th>
<th>Relationship</th>
</tr>
<tr>
<td><input type="radio"/></td>
<td>Steve</td>
<td>Foo</td>
<td>01/01/1978</td>
<td>Policyholder</td>
</tr>
<tr>
<td><input type="radio"/></td>
<td>Steffie</td>
<td>Foo</td>
<td>01/01/1978</td>
<td>Spouse</td>
</tr>
<tr>
<td><input type="radio"/></td>
<td>Stan</td>
<td>Foo</td>
<td>01/01/1994</td>
<td>Son</td>
</tr>
<tr>
<td><input type="radio"/></td>
<td>Stella</td>
<td>Foo</td>
<td>01/01/1992</td>
<td>Daughter</td>
</tr>
</table>
@import "compass";
/*
RESPONSTABLE 2.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%;
overflow: hidden;
background: $background-color;
color: $text-color;
border-radius: $border-radius;
border: $outer-border;
tr {
border: $cell-border;
&:nth-child(odd) { // highlight the odd rows with a color
background-color: $highlight-color;
}
}
th {
display: none; // hide all the table header for mobile
border: $header-border;
background-color: $header-background-color;
color: $header-text-color;
padding: 1em;
&:first-child { // show the first table header for mobile
display: table-cell;
text-align: center;
}
&:nth-child(2) { // show the second table header but replace the content with the data-th from the markup for mobile
display: table-cell;
span {display:none;}
&:after {content:attr(data-th);}
}
@media (min-width: $breakpoint) {
&:nth-child(2) { // hide the data-th and show the normal header for tablet and desktop
span {display: block;}
&:after {display: none;}
}
}
}
td {
display: block; // display the table data as one block for mobile
word-wrap: break-word;
max-width: 7em;
&:first-child {
display: table-cell; // display the first one as a table cell (radio button) for mobile
text-align: center;
border-right: $cell-border;
}
@media (min-width: $breakpoint) {
border: $cell-border;
}
}
th, td {
text-align: left;
margin: .5em 1em;
@media (min-width: $breakpoint) {
display: table-cell; // show the table as a normal table for tablet and desktop
padding: 1em;
}
}
}
}
// 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;}
}
@trenches2

This comment has been minimized.

Copy link

trenches2 commented Jul 24, 2018

Sorry Jordy
Forgive my ignorance, how do I link the HTML code to the css style?

Regards
Gio

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.