Horizontally And Vertically Scrollable Content With Fixed Header

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

Solution 1:

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

Header width changes:http://jsfiddle.net/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;}

Solution 2:

Sticky table headers

DEMO:http://jsfiddle.net/gvee/kJ9xp/

HTML

<table><thead><th>A</th><th>B</th><th>C</th><th>D</th></thead><trclass="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-headerth {
    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();
    }
});