D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
fpauser
Full window
Github gist
// source http://jsbin.com/rigabepeca
<!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>