Skip to content

Instantly share code, notes, and snippets.

@danyeah

danyeah/respnsive-tables.html

Created April 23, 2013 13:19
Show Gist options
  • Save danyeah/5443477 to your computer and use it in GitHub Desktop.
Save danyeah/5443477 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive tables with mobile approach
Raw
respnsive-tables.html
<!DOCTYPE html>
<html>
<head>
<title>test table</title>
<style>
.row-head {
display:none;
}
.cell {
display:block;
}
.row .cell:last-child {
margin-bottom:20px;
}
.cell:before {
font-weight:bold;
content:attr(data-label) ": ";
}
@media (min-width: 640px) {
.row, .row-head {
display:table-row;
}
.cell {
display:table-cell;
}
.cell:before {
content:"";
}
}
</style>
</head>
<body>
<p>Demo <a href="http://codepen.io/danielhq/pen/tIpns">codepen.io</a><br/>
resize the browser to see the effects
</p>
<table class="table">
<tr class="row-head">
<th class="cell">name</th>
<th class="cell">Surname</th>
<th class="cell">Age</th>
</tr>
<tr class="row">
<td class="cell" data-label="name">Jonny</td>
<td class="cell" data-label="Surname">Combat</td>
<td class="cell last" data-label="age">23</td>
</tr>
<tr class="row">
<td class="cell" data-label="name">Michael</td>
<td class="cell" data-label="Surname">Jordan</td>
<td class="cell last" data-label="age">44</td>
</tr>
<tr class="row">
<td class="cell" data-label="name">Jonny</td>
<td class="cell" data-label="Surname">Cash</td>
<td class="cell last" data-label="age">64</td>
</tr>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment