Skip to content

Instantly share code, notes, and snippets.

@fpauser

fpauser/index.html

Created January 26, 2015 22:26
Show Gist options
  • Save fpauser/7e5185d98e52ee5634cd to your computer and use it in GitHub Desktop.
Save fpauser/7e5185d98e52ee5634cd to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
#table-container {
position:absolute;
top:100px;
left:100px;
width:200px;
height:150px;
background:#00cc00;
overflow:hidden;
}
.cell {
overflow: hidden;
white-space:nowrap;
text-overflow:ellipsis;
width:120px;
}
table {
width:100%;
border-collapse:collapse;
}
th {
background:#000;
color:#fff;
border:1px solid #fff;
}
td {
background:#ccc;
color:#000;
border:1px solid #fff;
}
.thead-container {
position:absolute;
z-index:1;
top:0; left:0;
right:15px;
overflow:hidden;
}
.tbody-container {
position:absolute;
top:0; left:0;
right:0;
bottom:0;
overflow: scroll;
padding-top:20px
}
</style>
</head>
<body>
<div id="table-container">
<div class="thead-container">
<table>
<thead>
<tr>
<th>
<div class="cell">ID</div>
</th>
<th>
<div class="cell">Value 1</div>
</th>
<th>
<div class="cell">Value 2</div>
</th>
<th>
<div class="cell">Value 3</div>
</th>
<th>
<div class="cell">Value 4</div>
</th>
</tr>
</thead>
</table>
</div>
<div class="tbody-container">
<table>
<tbody>
<tr>
<td>
<div class="cell">1</div>
</td>
<td>
<div class="cell">123 123123 123</div>
</td>
<td>
<div class="cell">123 123123 123</div>
</td>
<td>
<div class="cell">123 123123 123</div>
</td>
<td>
<div class="cell">123 123123 123</div>
</td>
</tr>
<tr>
<td>
<div class="cell">2</div>
</td>
<td>
<div class="cell">123 123123 123</div>
</td>
<td>
<div class="cell">123 123123 123</div>
</td>
<td>
<div class="cell">123 123123 123</div>
</td>
<td>
<div class="cell">123 123123 123</div>
</td>
</tr>
<tr>
<td>
<div class="cell">3</div>
</td>
<td>
<div class="cell">123 123123 123</div>
</td>
<td>
<div class="cell">123 123123 123</div>
</td>
<td>
<div class="cell">123 123123 123</div>
</td>
<td>
<div class="cell">123 123123 123</div>
</td>
</tr>
<tr>
<td>
<div class="cell">4</div>
</td>
<td>
<div class="cell">123 123123 123</div>
</td>
<td>
<div class="cell">123 123123 123</div>
</td>
<td>
<div class="cell">123 123123 123</div>
</td>
<td>
<div class="cell">123 123123 123</div>
</td>
</tr>
<tr>
<td>
<div class="cell">5</div>
</td>
<td>
<div class="cell">123 123123 123</div>
</td>
<td>
<div class="cell">123 123123 123</div>
</td>
<td>
<div class="cell">123 123123 123</div>
</td>
<td>
<div class="cell">123 123123 123</div>
</td>
</tr>
<tr>
<td>
<div class="cell">6</div>
</td>
<td>
<div class="cell">123 123123 123</div>
</td>
<td>
<div class="cell">123 123123 123</div>
</td>
<td>
<div class="cell">123 123123 123</div>
</td>
<td>
<div class="cell">123 123123 123</div>
</td>
</tr>
<tr>
<td>
<div class="cell">7</div>
</td>
<td>
<div class="cell">123 123123 123</div>
</td>
<td>
<div class="cell">123 123123 123</div>
</td>
<td>
<div class="cell">123 123123 123</div>
</td>
<td>
<div class="cell">123 123123 123</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script id="jsbin-javascript">
$(initializeFixedHeader);
function initializeFixedHeader() {
var $tableContainer = $('#table-container');
var $theadContainer = $('.thead-container', $tableContainer);
var $tbodyContainer = $('.tbody-container', $tableContainer);
var ths = $('th', $theadContainer);
var tds = $('tr:first > td', $tbodyContainer);
// synchronize column widths
ths.each(function(i, e) {
$(e).width( $(tds[i]).outerWidth() );
});
// adjust tbody-padding
$tbodyContainer.css({paddingTop: $theadContainer.innerHeight() - 1});
// setup scroll handler
$tbodyContainer.on('scroll', function(e) {
$theadContainer.scrollLeft($tbodyContainer.scrollLeft());
});
}
</script>
<script id="jsbin-source-css" type="text/css">#table-container {
position:absolute;
top:100px;
left:100px;
width:200px;
height:150px;
background:#00cc00;
overflow:hidden;
}
.cell {
overflow: hidden;
white-space:nowrap;
text-overflow:ellipsis;
width:120px;
}
table {
width:100%;
border-collapse:collapse;
}
th {
background:#000;
color:#fff;
border:1px solid #fff;
}
td {
background:#ccc;
color:#000;
border:1px solid #fff;
}
.thead-container {
position:absolute;
z-index:1;
top:0; left:0;
right:15px;
overflow:hidden;
}
.tbody-container {
position:absolute;
top:0; left:0;
right:0;
bottom:0;
overflow: scroll;
padding-top:20px
}</script>
<script id="jsbin-source-javascript" type="text/javascript">$(initializeFixedHeader);
function initializeFixedHeader() {
var $tableContainer = $('#table-container');
var $theadContainer = $('.thead-container', $tableContainer);
var $tbodyContainer = $('.tbody-container', $tableContainer);
var ths = $('th', $theadContainer);
var tds = $('tr:first > td', $tbodyContainer);
// synchronize column widths
ths.each(function(i, e) {
$(e).width( $(tds[i]).outerWidth() );
});
// adjust tbody-padding
$tbodyContainer.css({paddingTop: $theadContainer.innerHeight() - 1});
// setup scroll handler
$tbodyContainer.on('scroll', function(e) {
$theadContainer.scrollLeft($tbodyContainer.scrollLeft());
});
}</script></body>
</html>
Raw
jsbin.rigabepeca.css
#table-container {
position:absolute;
top:100px;
left:100px;
width:200px;
height:150px;
background:#00cc00;
overflow:hidden;
}
.cell {
overflow: hidden;
white-space:nowrap;
text-overflow:ellipsis;
width:120px;
}
table {
width:100%;
border-collapse:collapse;
}
th {
background:#000;
color:#fff;
border:1px solid #fff;
}
td {
background:#ccc;
color:#000;
border:1px solid #fff;
}
.thead-container {
position:absolute;
z-index:1;
top:0; left:0;
right:15px;
overflow:hidden;
}
.tbody-container {
position:absolute;
top:0; left:0;
right:0;
bottom:0;
overflow: scroll;
padding-top:20px
}
Raw
jsbin.rigabepeca.js
$(initializeFixedHeader);
function initializeFixedHeader() {
var $tableContainer = $('#table-container');
var $theadContainer = $('.thead-container', $tableContainer);
var $tbodyContainer = $('.tbody-container', $tableContainer);
var ths = $('th', $theadContainer);
var tds = $('tr:first > td', $tbodyContainer);
// synchronize column widths
ths.each(function(i, e) {
$(e).width( $(tds[i]).outerWidth() );
});
// adjust tbody-padding
$tbodyContainer.css({paddingTop: $theadContainer.innerHeight() - 1});
// setup scroll handler
$tbodyContainer.on('scroll', function(e) {
$theadContainer.scrollLeft($tbodyContainer.scrollLeft());
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment