Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Table with fixed col and row headers (prototype)
table
thead
tr
th.blank
- for (c=0;c<20;c++) {
th='col ' + c
- }
tbody
- for (r=0;r<30;r++) {
tr
th= 'row '+r
- for (c=0;c<20;c++) {
td='(' + c + ', ' + r + ')'
- }
- }
$(function(){
function repositionFixedHeaders() {
var $hCol=$('tbody th');
var $hRow=$('thead');
var $table=$('table');
var offsetTop = $('body').scrollTop();
var offsetLeft = $('body').scrollLeft();
requestAnimationFrame(repositionFixedHeaders);
// move fixed header row
$hRow.css('left',-offsetLeft);
// move fixed header column
$hCol.each(function() {
var vertOffset = $(this).parent().offset().top;
$(this).css('top',vertOffset-offsetTop);
});
// indicate horizontal scroll
if (offsetLeft > 0) {
if (!$table.hasClass('moreLeft')) {
$table.addClass('moreLeft');
}
} else {
$table.removeClass('moreLeft');
}
// indicate vert scroll
if (offsetTop > 0) {
if (!$table.hasClass('moreTop')) {
$table.addClass('moreTop');
}
} else {
$table.removeClass('moreTop');
}
}
repositionFixedHeaders();
});
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
* {
box-sizing:border-box;
}
html,
body {
height:100%;
}
table {
display:block;
position:relative;
&:after,
&:before {
content:'';
display:block;
position:fixed;
z-index:2000;
top:0;
left:0;
transition:box-shadow 250ms ease-out;
}
&.moreLeft:after {
box-shadow:4px 0 14px rgba(0,0,0,0.2);
height:100%;
width:150px;
}
&.moreTop:before {
box-shadow:0 4px 14px rgba(0,0,0,0.2);
height:40px;
width:100%;
}
tr {
display:flex;
flex-direction: row;
flex-wrap:nowrap;
justify-content:flex-start;
}
td,
th {
display:flex;
flex:1 0 150px;
padding:10px;
text-align:center;
border:1px solid #ccc;
background:#fff;
width:150px;
}
tbody {
margin-top:40px;
margin-left:150px;
position:relative;
z-index:100;
th {
backface-visibility: hidden;
position:fixed;
z-index:80;
left:0;
}
}
thead {
backface-visibility: hidden;
position:fixed;
z-index:200;
top:0;
margin-left:150px;
th {
height:40px;
z-index:100;
&.blank {
backface-visibility: hidden;
position:fixed;
z-index:200;
top:0;
left:0;
}
}
}
}

Table with fixed col and row headers (prototype)

Limited browser support, fixed size cells. I hope to make something more flexible.

A Pen by Ryan Niswonger on CodePen.

License.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.