Skip to content

Instantly share code, notes, and snippets.

@martine-dowden

martine-dowden/responsive-table.html

Last active December 15, 2021 14:41
Show Gist options
  • Save martine-dowden/f054d390042db4d3da63f060147b6a69 to your computer and use it in GitHub Desktop.
Save martine-dowden/f054d390042db4d3da63f060147b6a69 to your computer and use it in GitHub Desktop.
Download ZIP
Reponsive Table
Raw
responsive-table.html
<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%;
}
tbody, thead, tr {
display: block;
}
thead {
position: absolute;
left: -9999rem;
}
th, td {
display: block;
padding: 1ex 1ch;
}
td:before {
content: attr(data-header) ": ";
}
th, td:before {
color: slategray;
font-weight: regular;
font-variant: small-caps;
text-transform: capitalize;
text-align: left;
}
tr { border-bottom: solid 1px teal; }
tbody tr:first-of-type { border-top: solid 1px teal; }
tbody tr:nth-of-type(even) {
background: aliceblue;
}
@media (min-width: 600px) {
table, thead, tbody, tr, td, th {
display: revert;
position: revert;
}
td:before { content: ''; }
}
</style>
</head>
<body>
<h1>Responsive Table Demo</h1>
<table>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<tr>
<td data-header="Name">Thaddus Bezarra</td>
<td data-header="Email">[email protected]</td>
<td data-header="Department">Product Management</td>
</tr>
<tr>
<td data-header="Name">Linc Macourek</td>
<td data-header="Email">[email protected]</td>
<td data-header="Department">Legal</td>
</tr>
<tr>
<td data-header="Name">Arthur Brimmicombe</td>
<td data-header="Email">[email protected]</td>
<td data-header="Department">Product Management</td>
</tr>
<tr>
<td data-header="Name">Ferdinand Cater</td>
<td data-header="Email">[email protected]</td>
<td data-header="Department">Sales</td>
</tr>
<tr>
<td data-header="Name">Dee dee Ricks</td>
<td data-header="Email">[email protected]</td>
<td data-header="Department">Engineering</td>
</tr>
</tbody>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment