水平スクロール

Question

Iが常に表示されなければならない二つのデータの行（緑色）とヘッダ（赤）、を有する：

を私が既に持っている例をチェックアウト：

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

これは私の現在のHTMLです：

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

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

赤いヘッダーはコンテンツと共にスクロールしますが、現在の位置に固定してコンテンツに垂直にスクロールする必要があります（MS Excelスタイル）。

これはどのように達成できますか（好ましくはCSSのみ）。

UPDATE：赤いヘッダーは、対応するコンテンツと共に縦方向にスクロールしますが、水平方向にスクロールするときは左端に固定することが重要です。

Answer 1

純粋な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

私はあなたのものを廃棄してきましたし、完全に新しいものを作っている[OK]を、私はちょうど位置の相対容器内のものを包んいませんでしたが、あなたは少なくとも

物事が垂直のために簡単ですそれを行うために管理することができますスクロールができますが、水平方向のスクロールを期待して一緒にヘッダを移動した場合、（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; 
}