Horizontal scrolling with sticky div that stays on the left border

Issue

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/

Now the red header scrolls away together with the content, but it should stick to where it is now, but scroll vertically with the content (MS Excel style).

How can this be achieved (preferably with only CSS).

UPDATE: It is important that the red headers scroll vertically along with the corresponding content but stick to the left edge when scrolling horizontally.

.main {
  background-color: blue;
  overflow: scroll;
  height: 200px;
  width: 400px;
}

.row {
  height: 50px;
  overflow: scroll;
  clear: both;
  width: 1000px;
  background-color: yellow;
}

.sticky,
.content {
  float: left;
  width: 150px;
  border: 1px solid black;
}

.sticky {
  background-color: red;
}

.content {
  background-color: green;
}

<div class="main">
  <div class="row">
    <div class="sticky">Sticky header A</div>
    <div class="content">ContentA</div>
    <div class="content">ContentA</div>
    <div class="content">ContentA</div>
    <div class="content">ContentA</div>
  </div>
  <div class="row">
    <div class="sticky">Sticky header B</div>
    <div class="content">ContentB</div>
    <div class="content">ContentB</div>
    <div class="content">ContentB</div>
    <div class="content">ContentB</div>
  </div>
  <div class="row">
    <div class="sticky">Sticky header C</div>
    <div class="content">ContentC</div>
    <div class="content">ContentC</div>
    <div class="content">ContentC</div>
    <div class="content">ContentC</div>
  </div>
  <div class="row">
    <div class="sticky">Sticky header D</div>
    <div class="content">ContentD</div>
    <div class="content">ContentD</div>
    <div class="content">ContentD</div>
    <div class="content">ContentD</div>
  </div>
  <div class="row">
    <div class="sticky">Sticky header E</div>
    <div class="content">ContentE</div>
    <div class="content">ContentE</div>
    <div class="content">ContentE</div>
    <div class="content">ContentE</div>
  </div>
</div>

Solution

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:

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

.main {
    background-color:blue;
    overflow:scroll;
    height:200px;
    width:400px;
}
.row {
    height:50px;
    overflow:scroll;
    clear:both;
    width:1000px;
    position:relative;
    background-color:yellow;
    padding-left:150px;
    box-sizing:border-box;
}
.sticky, .content {
    float:left;
    width:150px;
    border:1px solid black;
}
.sticky {
    background-color:red;
    position:absolute; left:0; top:0;
}
.content {
    background-color:green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="main">
    <div class="row">
        <div class="sticky">I should stick to the left border</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
    </div>
    <div class="row">
        <div class="sticky">I should stick to the left border</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
    </div>
    <div class="row">
        <div class="sticky">I should stick to the left border</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
    </div>
    <div class="row">
        <div class="sticky">I should stick to the left border</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
    </div>
    <div class="row">
        <div class="sticky">I should stick to the left border</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
    </div>
</div>

Answered By - Pete