Skip to content

Instantly share code, notes, and snippets.

@rowanhogan

rowanhogan/index.html

Created July 31, 2014 04:37
Show Gist options
  • Save rowanhogan/a0708028bbfdfec66b17 to your computer and use it in GitHub Desktop.
Save rowanhogan/a0708028bbfdfec66b17 to your computer and use it in GitHub Desktop.
Download ZIP
Simple CSS-only fixed table header
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Table test</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th><div><label>One</label></div></th>
<th><div><label>Two</label></div></th>
<th><div><label>Three</label></div></th>
<th><div><label>Fourty-four</label></div></th>
<th><div><label>Five</label></div></th>
</tr>
</thead>
<tbody>
<tr>
<td>lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
<td>tempor incididunt ut labore et dolore magna aliqua.</td>
<td>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</td>
<td>consequat. Duis aute irure dolor in</td>
<td>cillum dolore eu</td>
</tr>
<tr>
<td>lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
<td>tempor incididunt ut labore et dolore magna aliqua.</td>
<td>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</td>
<td>consequat. Duis aute irure dolor in</td>
<td>cillum dolore eu</td>
</tr>
<tr>
<td>lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
<td>tempor incididunt ut labore et dolore magna aliqua.</td>
<td>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</td>
<td>consequat. Duis aute irure dolor in</td>
<td>cillum dolore eu</td>
</tr>
<tr>
<td>lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
<td>tempor incididunt ut labore et dolore magna aliqua.</td>
<td>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</td>
<td>consequat. Duis aute irure dolor in</td>
<td>cillum dolore eu</td>
</tr>
<tr>
<td>lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
<td>tempor incididunt ut labore et dolore magna aliqua.</td>
<td>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</td>
<td>consequat. Duis aute irure dolor in</td>
<td>cillum dolore eu</td>
</tr>
<tr>
<td>lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
<td>tempor incididunt ut labore et dolore magna aliqua.</td>
<td>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</td>
<td>consequat. Duis aute irure dolor in</td>
<td>cillum dolore eu</td>
</tr>
<tr>
<td>lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
<td>tempor incididunt ut labore et dolore magna aliqua.</td>
<td>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</td>
<td>consequat. Duis aute irure dolor in</td>
<td>cillum dolore eu</td>
</tr>
<tr>
<td>lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
<td>tempor incididunt ut labore et dolore magna aliqua.</td>
<td>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</td>
<td>consequat. Duis aute irure dolor in</td>
<td>cillum dolore eu</td>
</tr>
<tr>
<td>lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
<td>tempor incididunt ut labore et dolore magna aliqua.</td>
<td>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</td>
<td>consequat. Duis aute irure dolor in</td>
<td>cillum dolore eu</td>
</tr>
<tr>
<td>lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
<td>tempor incididunt ut labore et dolore magna aliqua.</td>
<td>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</td>
<td>consequat. Duis aute irure dolor in</td>
<td>cillum dolore eu</td>
</tr>
<tr>
<td>lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
<td>tempor incididunt ut labore et dolore magna aliqua.</td>
<td>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</td>
<td>consequat. Duis aute irure dolor in</td>
<td>cillum dolore eu</td>
</tr>
<tr>
<td>lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
<td>tempor incididunt ut labore et dolore magna aliqua.</td>
<td>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</td>
<td>consequat. Duis aute irure dolor in</td>
<td>cillum dolore eu</td>
</tr>
<tr>
<td>lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
<td>tempor incididunt ut labore et dolore magna aliqua.</td>
<td>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</td>
<td>consequat. Duis aute irure dolor in</td>
<td>cillum dolore eu</td>
</tr>
<tr>
<td>lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
<td>tempor incididunt ut labore et dolore magna aliqua.</td>
<td>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</td>
<td>consequat. Duis aute irure dolor in</td>
<td>cillum dolore eu</td>
</tr>
<tr>
<td>lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
<td>tempor incididunt ut labore et dolore magna aliqua.</td>
<td>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</td>
<td>consequat. Duis aute irure dolor in</td>
<td>cillum dolore eu</td>
</tr>
<tr>
<td>lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
<td>tempor incididunt ut labore et dolore magna aliqua.</td>
<td>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</td>
<td>consequat. Duis aute irure dolor in</td>
<td>cillum dolore eu</td>
</tr>
</tbody>
</table>
</body>
</html>
Raw
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font: 100%/1.5em Open Sans;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
}
td {
border: thin solid #eee;
padding: 1em;
}
th {
height: 3em;
}
th > div {
position: relative;
height: 3em;
}
th > div > label {
position: fixed;
z-index: 10;
background: whitesmoke;
height: 3em;
line-height: 3em;
padding: 0 1em;
width: 100%;
border: thin solid lightgrey;
border-right: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment