Skip to content

Instantly share code, notes, and snippets.

@sebble

sebble/index.html

Last active October 25, 2016 11:23
Show Gist options
  • Save sebble/af2b0a118f20b785c5d2025b28c4ef68 to your computer and use it in GitHub Desktop.
Save sebble/af2b0a118f20b785c5d2025b28c4ef68 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!doctype html>
<meta charset=utf-8>
<title>THEAD</title>
<!-- Basic Style -->
<style>
table {
font-size: 3rem;
}
th, td {
padding: 0 1rem;
}
tr:nth-child(even) {
background-color: #eee;
}
tbody > tr:hover {
background-color: #eef;
}
td:hover {
background-color: #fee;
}
thead > tr > th {
border-bottom: solid 3px #000;
}
tbody > tr > th {
border-right: solid 3px #000;
}
</style>
<!-- / Basic Style -->
<!-- Restrictive DIV -->
<div id=div>
<!-- Basic Table -->
<table cellspacing=0>
<thead>
<tr>
<th>&nbsp;</th>
<th>One</th>
<th>Two</th>
<th>Three</th>
<th>Four</th>
<th>Five</th>
<th>Six</th>
<th>Seven</th>
<th>Eight</th>
</tr>
</thead>
<tbody>
<tr> <th>A</th> <td>.</td> <td>.</td> <td>.</td> <td>.</td> <td>.</td> <td>.</td> <td>.</td> <td>.</td> </tr>
<tr> <th>B</th> <td>.</td> <td>.</td> <td>.</td> <td>.</td> <td>.</td> <td>.</td> <td>.</td> <td>.</td> </tr>
<tr> <th>C</th> <td>.</td> <td>.</td> <td>.</td> <td>.</td> <td>.</td> <td>.</td> <td>.</td> <td>.</td> </tr>
<tr> <th>D</th> <td>.</td> <td>.</td> <td>.</td> <td>.</td> <td>.</td> <td>.</td> <td>.</td> <td>.</td> </tr>
<tr> <th>E</th> <td>.</td> <td>.</td> <td>.</td> <td>.</td> <td>.</td> <td>.</td> <td>.</td> <td>.</td> </tr>
<tr> <th>F</th> <td>.</td> <td>.</td> <td>.</td> <td>.</td> <td>.</td> <td>.</td> <td>.</td> <td>.</td> </tr>
<tr> <th>G</th> <td>.</td> <td>.</td> <td>.</td> <td>.</td> <td>.</td> <td>.</td> <td>.</td> <td>.</td> </tr>
<tr> <th>H</th> <td>.</td> <td>.</td> <td>.</td> <td>.</td> <td>.</td> <td>.</td> <td>.</td> <td>.</td> </tr>
<tr> <th>I</th> <td>.</td> <td>.</td> <td>.</td> <td>.</td> <td>.</td> <td>.</td> <td>.</td> <td>.</td> </tr>
<tr> <th>J</th> <td>.</td> <td>.</td> <td>.</td> <td>.</td> <td>.</td> <td>.</td> <td>.</td> <td>.</td> </tr>
<tr> <th>K</th> <td>.</td> <td>.</td> <td>.</td> <td>.</td> <td>.</td> <td>.</td> <td>.</td> <td>.</td> </tr>
</tbody>
</table>
<!-- / Basic Table -->
</div>
<!-- / Restrictive DIV -->
<!-- Functional CSS -->
<style>
#div {
height: 300px;
width: 500px;
}
thead {
transform: translate(0px, 0px);
background-color: #fff;
}
tbody > tr > th {
transform: translate(0px, 0px);
background-color: #fff;
}
</style>
<!-- / Functional CSS -->
<!-- Sticky Header (and row TH) -->
<script>
document.querySelector('#div').addEventListener('scroll', function(e){
// THEAD
this.querySelector('thead').style.transform = 'translate(0px, '+this.scrollTop+'px)';
// TBODY>TH
let left = this.scrollLeft;
this.querySelectorAll('tbody > tr > th').forEach(function(el, i){
el.style.transform = 'translate('+left+'px, 0px)';
});
});
</script>
<!-- / Sticky Header (and row TH) -->
<!-- Extra Style -->
<style>
#div {
border: dashed 1px #999;
border-width: 0 2px 2px 0;
overflow: hidden;
}
#div:hover {
overflow: auto;
}
tr:nth-child(even) > th {
background-color: #eee;
}
tbody > tr:hover > th {
background-color: #eef;
}
</style>
<!-- / Extra Style -->
<!-- jQuery resizable DIV -->
<style>@import '//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css';</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>$("div").resizable({handles:'se'});</script>
<!-- / jQuery resizable DIV -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment