Create a gist now

Instantly share code, notes, and snippets.

Implemented locked first column and table header with two-tier header using div, css, minimal javascript/jquery. Demonstrated here in a thymeleaf template though easily adaptable elsewhere.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8"/>
<title></title>
<script src="/js/jquery-2.1.1.js"></script>
<style type="text/css">
.divtable {
position: relative;
overflow: auto;
max-width: 80%;
max-height: 300px;
border-top: solid 1px;
border-bottom: solid 1px;
border-left: solid 1px;
border-right: solid 1px;
}
.divtable * {
border-left: 0px;
border-right: 0px;
border-top: 0px;
border-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
}
.divtable-row {
display: inline-block;
white-space: nowrap;
background-clip: border-box;
opacity: 1;
}
.divtable-row:nth-child(odd) {
background-color: #F0F0F0;
}
.divtable-row:nth-child(even) {
background-color: white;
}
.divtable-row:nth-child(1) {
background-color: #D8D8D8;
min-height:26px;
}
.divtable-row:nth-child(1) .divtable-cell,.divtable-cell-super {
font-weight: bold;
text-align:center;
}
.divtable-row * {
white-space: nowrap;
}
#divtable-headers {
position: absolute;
top: 0px;
z-index: 10;
}
.divtable-cell-group {
display: inline-block;
background-color: inherit;
}
.divtable-cell-super {
border-bottom: solid 1px;
border-right: solid 1px;
}
.divtable-cell-group:nth-child(1) {
position: absolute;
left: 0px;
background-color: inherit;
}
.divtable-row:nth-child(1) .divtable-cell-group:nth-child(1) .divtable-cell {
height: 100%;
}
.divtable-row:nth-child(1) .divtable-cell-group:nth-child(1) .divtable-cell > div {
position:absolute;
top:30%;
width:100%;
text-align:center;
left: 0px;
}
.divtable-cell {
display: inline-block;
white-space: nowrap;
border-right: 1px solid;
min-height: 24px;
}
.divtable-cell * {
display: inline;
}
.comment-icon {
width: 16px;
height: 16px;
}
input, select {
background-color: transparent;
}
</style>
</head>
<body>
</body>
<h2>Header</h2>
<div style="padding-left: 50px">
<div class="divtable" data-th-if="${rows.size()} > 0">
<div id="divtable-headers" class="divtable-row">
<div class="divtable-cell-group">
<div class="divtable-cell"><div>Student</div></div>
</div><!--
--><div class="divtable-cell-group" data-th-each="resourceToObservation : ${rows.get(0).resourceToObservationMap}">
<div class="divtable-cell-super" data-th-text="${resourceToObservation.key.resource.name}">First Activity</div>
<div class="divtable-cell divtable-header-column-common" data-th-each="observationDatum : ${resourceToObservation.value}" data-th-text="${observationDatum.observationMetadata.name}">Observation 1</div>
</div><!--
--></div>
<div class="divtable-row" data-th-each="row : ${rows}">
<div class="divtable-cell-group">
<div class="divtable-cell" data-th-inline="text">[[${row.person.lastName}]], [[${row.person.firstName}]]</div>
</div><!--
--><div class="divtable-cell-group" data-th-each="resourceToObservation : ${row.resourceToObservationMap}">
<div class="divtable-cell" data-th-each="observationDatum : ${resourceToObservation.value}">
<input type="text" maxlength="50" value="text" data-th-value="${observationDatum.observation} == null ? '' : ${observationDatum.observation.value}"/>
<img src="/images/comment-no.png" alt="comment" class="comment-icon"/>
</div><!--
--></div>
</div>
</div>
</div>
<script type="text/javascript">
var cellWidths = Array();
var rowHeights = Array();
$('.divtable-row').each(function(rowIdx, rowElement){
var thisRowHeight = $(this).height();
if (rowHeights.length > (rowIdx + 1)) {
rowHeights[rowIdx] = Math.max(rowHeights[rowIdx], thisRowHeight);
} else {
rowHeights.push(thisRowHeight);
}
$(this).find('.divtable-cell').each(function(idx, element){
if (cellWidths.length > (idx + 1)) {
cellWidths[idx] = Math.max(cellWidths[idx], $(this).width());
} else {
cellWidths.push($(this).width());
}
});
});
$('.divtable-row').each(function(rowIdx, element) {
$(this).css({
'height' : rowHeights[rowIdx]
});
$(this).find('.divtable-cell').each(function(idx, element){
$(this).css({
'width' : cellWidths[idx],
'min-width' : cellWidths[idx]
});
});
});
$('div.divtable-row:nth-child(1) .divtable-cell-group:nth-child(1)').each(function() {
console.log($(this));
$(this).css('height', $(this).parent().height());
});
$('div.divtable-row:nth-child(2)').css({
'margin-top' : $('#divtable-headers').outerHeight()
});
$('div.divtable-cell-group:nth-child(2)').each(function(i, e){
$(this).css({'margin-left': $(this).prev().outerWidth()});
});
$('.divtable').scroll(function(){
$('.divtable-cell-group:nth-child(1)').css({
'position': 'absolute',
'left': $(this).scrollLeft()
});
$('#divtable-headers').css({
'position': 'absolute',
'top': $(this).scrollTop()
});
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment