Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Reponsive Table
<html>
<head>
<title>Responsive Table</title>
<meta charset="UTF-8">
<meta name="description" content="How to create a responsive table">
<meta name="keywords" content="HTML,CSS">
<meta name="author" content="Martine Dowden">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background: #fafafa;
color: #333;
font-family: Helvetica, sans-serif;
padding: 3rem;
}
table {
background: #fff;
border-collapse: collapse;
width: 100%;
box-shadow: 1px 1px 2px #ccc;
}
thead {
left: -9999rem;
position: absolute;
top: -9999rem;
}
td {
display: block;
margin: .5rem 1rem;
}
td:before {
color: #888;
content: attr(name) ":";
display: inline-block;
font-size: .875rem;
font-weight: 300;
margin-right: .5rem;
}
tr:nth-last-of-type(even) {
background: rgba(56, 113, 170, 0.15);
}
@media(min-width: 600px) {
table {
border-collapse: collapse;
}
thead {
left: 0;
position: relative;
top: 0;
}
th {
color: #888;
font-size: .875rem;
font-weight: 300;
text-align: left;
}
td, th {
display: table-cell;
padding: .75rem 1rem;
margin: 0;
}
td:before {
content: none;
}
}
</style>
</head>
<body>
<h1>Responsive Table Demo</h1>
<table>
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td name="Id">1</td>
<td name="First Name">Zebulon</td>
<td name="Last Name">Riddles</td>
<td name="Email">zriddles0@hatena.ne.jp</td>
</tr>
<tr>
<td name="Id">2</td>
<td name="First Name">Loralyn</td>
<td name="Last Name">Gallo</td>
<td name="Email">lgallo1@sina.com.cn</td>
</tr>
<tr>
<td name="Id">3</td>
<td name="First Name">Gualterio</td>
<td name="Last Name">Cometti</td>
<td name="Email">gcometti2@usgs.gov</td>
</tr>
<tr>
<td name="Id">4</td>
<td name="First Name">Lyndy</td>
<td name="Last Name">Arkcoll</td>
<td name="Email">larkcoll3@behance.net</td>
</tr>
</tbody>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment