Skip to content

Instantly share code, notes, and snippets.

@orleika

orleika/fix_x-y-header_table.html

Last active July 27, 2016 09:18
Show Gist options
  • Save orleika/09602fefa302396aad914bdf37d75f39 to your computer and use it in GitHub Desktop.
Save orleika/09602fefa302396aad914bdf37d75f39 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
fix_x-y-header_table.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fix x-y-header table</title>
<style>
.view-table {
overflow: scroll;
width: 600px;
height: 100px;
}
.fix-table {
border: 1px solid #333;
table-layout: fixed;
border-collapse: collapse;
}
.fix-table td {
border: 1px solid #333;
white-space: nowrap;
}
.fix-X {
position: relative;
background: #fff;
}
.fix-Y {
position: relative;
background: #fff;
z-index: 10;
}
.fix-XY {
z-index: 11;
}
</style>
</head>
<body>
<div id="xyScroll" class="view-table">
<table class="fix-table">
<tbody>
<tr>
<td class="fix-X fix-Y fix-XY">A</td>
<td class="fix-Y">B</td>
<td class="fix-Y">C</td>
<td class="fix-Y">E</td>
<td class="fix-Y">F</td>
<td class="fix-Y">G</td>
<td class="fix-Y">H</td>
<td class="fix-Y">I</td>
<td class="fix-Y">J</td>
<td class="fix-Y">K</td>
<td class="fix-Y">L</td>
</tr>
<tr>
<td class="fix-X">1-A</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
</tr>
<tr>
<td class="fix-X">2-A</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
</tr>
<tr>
<td class="fix-X">3-A</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
</tr>
<tr>
<td class="fix-X">4-A</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
</tr>
<tr>
<td class="fix-X">5-A</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
</tr>
<tr>
<td class="fix-X">6-A</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
</tr>
<tr>
<td class="fix-X">7-A</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
</tr>
<tr>
<td class="fix-X">8-A</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
</tr>
<tr>
<td class="fix-X">9-A</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
<td>dummy text</td>
</tr>
</tbody>
</table>
</div>
<script>
(function() {
var fixX = document.getElementsByClassName('fix-X');
var fixY = document.getElementsByClassName('fix-Y');
var viewTable = document.getElementById('xyScroll');
viewTable.addEventListener('scroll', function(event) {
for (var i = 0; i < fixX.length; i++) {
fixX[i].style.left = viewTable.scrollLeft + 'px';
}
for (var j = 0; j < fixY.length; j++) {
fixY[j].style.top = viewTable.scrollTop + 'px';
}
});
}());
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment