Horizontal scrolling with sticky div that stays on the left border

Question

I have two rows of data (green) and a header (red), which should be visible at all times:

Check out the example I already have:

http://jsfiddle.net/j9C8R/33/

Answer 1

Ok I've scrapped your thing and have made a complete new one, I've just not wrapped up things inside a position relative container but you can manage to do it atleast

The things are easy for vertical scroll but if you expect horizontal scroll and move headers along, (CSS Wont Just Do It)

Demo

CSS

.head {
    background-color: #f00;
    width: 300px;
    position: absolute;
    left: 100px;
}

.head table {
    width: 100%;
}

.body {
    position: relative;
    left: 100px;
    top: 20px;
    width: 300px;
    height: 50px;
    overflow-y: auto;
}

.body table {
    width: 100%;
}

.body td {
    width: 100px;
}

.head table td {
    width: 100px;
}

.left {
    position: absolute;
    background-color: #0f0;
    width: 90px;
    top: 40px;
}

Answer 2

UPDATE

please note the below is now a little out of date as we have css position sticky

Original Post

I do not think it is possible to achieve your goal through pure css as items that are sticky usually use position:fixed which unfortunately fixes them relative to the viewport.

with the use of javascript (in this case the jquery library) and absolute positioning, you should be able to achieve what you are after:

new styles:

.row {
    height:50px;
    overflow:scroll;
    clear:both;
    width:1000px;
    position:relative; //for the absolute positioning of sticky
    background-color:yellow;
    padding-left:150px; //this is the size of your sticky column so it doesn't cover content when fully left
    box-sizing:border-box;//this is so the padding doesn't add extra width to your 1000px
}

.sticky {
    background-color:red;
    position:absolute; left:0; top:0;
}

javascript:

$('.main').scroll(function() {
    $(this).find('.sticky').css('left', $(this).scrollLeft());
});

http://jsfiddle.net/j9C8R/36/