I am attempting to develop an app container that mimics the functionality of Microsoft Excel. The container should scroll both horizontally and vertically, with fixed headers on the left and top that move along with the content. Here is a rough representation:
+---ScrollableContainer---------+
|+-a-++----b--------------------|-------------------+
|| || | |
|| |+-------------------------|-------------------|
|| |+----Content--------------|-------------------+
|| || | |
|| || | |
+-------------------------------+ |
| || |
| || |
+---++---------------------------------------------+
The ScrollableContainer serves as the main container, offering horizontal and vertical scrolling capabilities.
Within the ScrollableContainer are 3 divs: a, b, and Content.
The challenge I am facing is ensuring that the div a remains fixed on the left side while scrolling up and down, and that the div b stays fixed on top while scrolling left and right with ScrollableContainer. The Content div should be free to scroll in any direction.
Think of it like an "Agenda". The a div represents the "HOUR" pivot, the b div represents the "DAY" pivot, and the Content acts as the agenda, organized by hours and days. The pivots should move along with the scroll.
EDIT:
Here is a partially functional example: - AndyM
.rows {
height:200px;
width:400px;
background-color:rgb(240,240,240);
position:relative;
}
.rows > header {
position:absolute;
top:0;
left:0;
bottom:0;
width:40px;
background-color:blue;
}
.rows > article {
position:absolute;
top:0;
left:40px;
bottom:0;
right:0;
overflow-x:scroll;
}
.cols {
position:relative;
height:100%;
}
.cols header {
height:40px;
position:absolute;
top:0;
left:0;
background-color:green;
}
.cols article {
position:absolute;
top:40px;
bottom:0;
left:0;
overflow-y:scroll;
}
row {
display:block;
height:40px;
white-space:nowrap;
}
cell {
display:inline-block;
height:100%;
width:70px;
}<section class="rows">
<header>
<row>
<cell>Text</cell>
</row>
<row>
<cell>Text</cell>
</row>
<row>
<cell>Text</cell>
</row>
<row>
<cell>Text</cell>
</row>
<row>
<cell>Text</cell>
</row>
<row>
<cell>Text</cell>
</row>
</header>
<article>
<section class="cols">
<header>
<row>
<cell>Text</cell>
<cell>Text</cell>
<cell>Text</cell>
<cell>Text</cell>
<cell>Text</cell>
<cell>Text</cell>
<cell>Text</cell>
</row>
</header>
<article>
<row>
<cell>Text</cell>
<cell>Text</cell>
<cell>Text</cell>
<cell>Text</cell>
<cell>Text</cell>
<cell>Text</cell>
<cell>Text</cell>
</row>
<row>
<cell>Text</cell>
<cell>Text</cell>
<cell>Text</cell>
<cell>Text</cell>
<cell>Text</cell>
<cell>Text</cell>
<cell>Text</cell>
</row>
<row>
<cell>Text</cell>
<cell>Text</cell>
<cell>Text</cell>
<cell>Text</cell>
<cell>Text</cell>
<cell>Text</cell>
<cell>Text</cell>
</row>
<row>
<cell>Text</cell>
<cell>Text</cell>
<cell>Text</cell>
<cell>Text</cell>
<cell>Text</cell>
<cell>Text</cell>
<cell>Text</cell>
</row>
<row>
<cell>Text</cell>
<cell>Text</cell>
<cell>Text</cell>
<cell>Text</cell>
<cell>Text</cell>
<cell>Text</cell>
<cell>Text</cell>
</row>
<row>
<cell>Text</cell>
<cell>Text</cell>
<cell>Text</cell>
<cell>Text</cell>
<cell>Text</cell>
<cell>Text</cell>
<cell>Text</cell>
</row>
</article>
</section>
</article>
</section>The issue with this setup is that the vertical scrollbar is not visible, and the .col header does not scroll properly. Nonetheless, this example should provide a glimpse of the desired outcome.