It is not simple. I came up with a Script solution. (I don't think this can be done using pure CSS)
HTML remains the same as you posted, CSS has changed a bit, jQuery code has been added.
Working script Tested: IE10, IE9, IE8, FF, Chrome
BTW: if you have unique elements, why don't you use id instead of classes? I think this gives better selector performance.
An explanation of how this works: inner-container will cover the entire outer-container space (so basically it is not needed), but I left it there, so you don't need to change the DOM.
table-header relatively positioned without scrolling ( overflow: hidden ), we will process its scrolling later.
table-body should cover the rest of the inner-container height, so I used Script to determine which height to fix. (it changes dynamically when the window is resized) without a fixed height, scrolling will not appear, because the div will just become large, and not .. note that this part can be executed without a script if you correct the height of the title and use CSS3 (like shown at the end of the answer)
now it’s just a matter of moving the title along with the body each time it scrolls. this is done by the function assigned to the scroll event.
CSS (some of them were copied from your style)
* { padding: 0; margin: 0; } body { height: 100%; width: 100%; } table { border-collapse: collapse; } .outer-container { background-color: #ccc; position: absolute; top:0; left: 0; right: 300px; bottom: 40px; } .inner-container { height: 100%; overflow: hidden; } .table-header { position: relative; } .table-body { overflow: auto; } .header-cell { background-color: yellow; text-align: left; height: 40px; } .body-cell { background-color: blue; text-align: left; } .col1, .col3, .col4, .col5 { width:120px; min-width: 120px; } .col2 { min-width: 300px; }
JQuery
$(document).ready(function () { setTableBody(); $(window).resize(setTableBody); $(".table-body").scroll(function () { $(".table-header").offset({ left: -1*this.scrollLeft }); }); }); function setTableBody() { $(".table-body").height($(".inner-container").height() - $(".table-header").height()); }
If you don't care about fixing the height of the header (I saw that you fixed the height of the cell in your CSS), some of the Scripts may be skipped if you use CSS3: Shortened script (this will not work in IE8)