scorrimento orizzontale con div appiccicosa che rimane sul bordo sinistro

Question

Ho due righe di dati (verde) e un colpo di testa (rosso), che dovrebbe essere visibile in ogni momento:

Partenza l'esempio che ho già:

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

Questo è il mio attuale 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> 

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

Ora l'intestazione rossa scorre via insieme al contenuto, ma dovrebbe rimanere nel punto in cui si trova ora, ma scorrere verticalmente con il contenuto (stile MS Excel).

Come ottenere ciò (preferibilmente con solo CSS).

AGGIORNAMENTO: È importante che le intestazioni rosse scorrano verticalmente insieme al contenuto corrispondente, ma restino sul bordo sinistro durante lo scorrimento orizzontale.

Answer 1

Non penso che sia possibile raggiungere il tuo obiettivo tramite puro css poiché gli elementi solitamente appiccicosi usano lo position:fixed che purtroppo li corregge rispetto al viewport.

con l'uso di javascript (in questo caso la libreria jQuery) e posizionamento assoluto, si dovrebbe essere in grado di realizzare ciò che stai cercando:

nuovi stili:

.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 ho scartato la tua cosa e ho fatto uno nuovo completo, non ho appena concluso le cose all'interno di un contenitore relativa posizione, ma si riesce a farlo atleast

Le cose sono facili per verticale scorrere ma se vi aspettate di scorrimento orizzontale e spostare le intestazioni lungo, (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; 
}