I have a content div with dynamic width (it adjusts itself to the windows width). In this div I have two tables which are broader than the viewport of my wrapper div. Therefore the wrapper should be horizontally scrollable. The div has also a fixed height which means that everything should be vertically scrollable too! Just the Header should stay on top but also scroll along horizontally with the content table.

<div class="wrapper">
    <table width="2000" class="fixed"><tr></tr></table>
    <table width="2000"><tr></tr></table>
</div>

Here's a fiddle to demonstrate my problem: jsFiddle

I have a content div with dynamic width (it adjusts itself to the windows width). In this div I have two tables which are broader than the viewport of my wrapper div. Therefore the wrapper should be horizontally scrollable. The div has also a fixed height which means that everything should be vertically scrollable too! Just the Header should stay on top but also scroll along horizontally with the content table.

<div class="wrapper">
    <table width="2000" class="fixed"><tr></tr></table>
    <table width="2000"><tr></tr></table>
</div>

Here's a fiddle to demonstrate my problem: jsFiddle

• javascript
• html
• css

• Do you mean that when the user scrolls down, then the 'header' table should always remain visible? – FixMaker Commented Aug 29, 2013 at 14:12
• Yep that's what I meant! It should be scrollable both vertical and horizonzal but the header should stay on top. – user986408 Commented Aug 29, 2013 at 14:14
• Simple move the <div class="mega"> (line 1) down to above <table width="2000"> (line 5) – Xareyo Commented Aug 29, 2013 at 14:18
• 2 This way the header is not scrollable horizontally along with the content table. – user986408 Commented Aug 29, 2013 at 14:19

2 Answers 2

Demo: http://jsfiddle/techsin/pDhmy/4/

Header width changes: http://jsfiddle/techsin/pDhmy/8/

code that does this

$('.mega').on('scroll',function(){$('.header').css('top',$(this).scrollTop());});

and....

.header{position:absolute; background-color:rgb(202, 202, 202);}

.header+* {margin-top:30px;}

Sticky table headers

DEMO: http://jsfiddle/gvee/kJ9xp/

HTML

<table>
    <thead>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
    </thead>
    <tr class="sticky-header">
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
    </tr>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>2</td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
    </tr>

    ... etc ...

</table>

CSS

* {
    margin: 0;
    border: 0;
    padding:0;
}

table {
    border-collapse: collapse;
    margin: 10px;
}

th, td {
    width: 50px;
    height: 50px;
    background-color: #eee;
    text-align: center;
    border: 1px solid #ddd;
}

.sticky-header {
    display: none;
    position: fixed;
    top: 0px;
}
.sticky-header th {
    background-color: red;
}

JQuery

var thead = $('thead');
var th = $('.sticky-header');
var t = $('table');

$(document).scroll(function() {
    if ($(this).scrollTop() >= thead.offset().top && $(this).scrollTop() < t.offset().top + t.height() - th.height())
    {
        th.show();
    } else {
        th.hide();
    }
});