使用停留在左边框上的粘性 div 进行水平滚动

Question

我有两行数据（绿色）和一个标题（红色），应该始终可见：

查看我已有的示例：

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

现在红色标题与内容一起滚动，但它应该保持在现在的位置，但随着内容垂直滚动（MS Excel 样式）。

如何实现（最好只使用 CSS）。

更新：重要的是红色标题与相应的内容一起垂直滚动，但在水平滚动时保持在左边缘。

.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>

Answer 1

更新

请注意下面的内容现在有点过时了，因为我们有 css position sticky

原帖

我认为通过纯 css 实现您的目标是不可能的，因为粘性项目通常使用position:fixed，不幸的是它相对于视口修复了它们。

通过使用javascript（在本例中为jquery库）和绝对定位，您应该能够实现您所追求的：

新样式：

.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/

Answer 2

好的，我已经废弃了你的东西并制作了一个全新的东西，我只是没有将东西包裹在相对位置的容器中，但你至少可以设法做到这一点

垂直滚动很容易，但是如果您希望水平滚动并移动标题，（CSS不会这样做）

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;
}