I have a container div, inside with a header and body div (both are grid display) to recreate a table with scrollable and sticky header, following this guide. But I have an additional requirement which is to collapse the header and span it across the body to be something like this.
.
So my plan is to have a positioned absolute item inside the grid and set the width to span across the body also.
Here is my code HTML
<div class="wrap">
<div class="headers">
<div class="scroller syncscroll" name="myElements">
<div class="track">
<div class="heading">Heading 1</div>
</div>
<div class="track">
<div class="heading">Heading 2</div>
</div>
<div class="track relative">
<div class="collapsible">Heading 7</div>
</div>
</div>
</div>
<div class="tracks syncscroll" name="myElements">
<div class="track">
<div class="entry">
<h3>Lorem, ipsum dolor.</h3>
</div>
<div class="entry">
<h3>Lorem, ipsum.</h3>
</div>
<div class="entry">
<h3>Lorem, ipsum.</h3>
</div>
</div>
<div class="track">
<div class="entry">
<h3>Lorem, ipsum dolor.</h3>
</div>
<div class="entry">
<h3>Lorem, ipsum.</h3>
</div>
<div class="entry">
<h3>Lorem, ipsum.</h3>
</div>
</div>
<div class="track">
<div class="entry">
<h3>Lorem, ipsum dolor.</h3>
</div>
<div class="entry">
<h3>Lorem, ipsum.</h3>
</div>
<div class="entry">
<h3>Lorem, ipsum.</h3>
</div>
</div>
</div>
</div>
CSS
body {
background: #f5f7fa;
overflow-x: hidden;
}
.wrap {
position: relative;
margin: 10em auto 30em;
max-width: 500px;
overscroll-behavior: contain;
}
.headers {
top: 0;
position: -webkit-sticky;
position: sticky;
z-index: 1;
}
.tracks,
.scroller {
display: grid;
grid-template-columns: repeat(7, 200px);
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
.scroller {
overflow-x: hidden;
}
.tracks {
overflow: auto;
scroll-snap-type: x mandatory;
}
.scenes::-webkit-scrollbar,
.scroller::-webkit-scrollbar {
display: none;
}
.track + .track {
margin-left: -1px;
}
.relative {
position: relative;
}
.collapsible {
top: 0px;
position: absolute;
left: 0px;
width: 100%;
height: 200px !important;
background-color: aqua;
line-height: 30px;
// max-width: 30px;
color: white;
z-index: 9;
cursor: pointer;
writing-mode: vertical-lr;
text-align: center;
}
.heading {
height: 50px;
display: flex;
justify-content: center;
align-items: center;
position: -webkit-sticky;
position: sticky;
top: 0;
border: solid #fff;
border-width: 0 1px;
z-index: 1;
background: #efefef;
font-weight: 700;
}
.entry {
border: 1px solid #ebebeb;
border-top: 0;
background: #fff;
height: 8em;
padding: 1em;
}
}
This code pen shows my problem. For some reason, it seems like the collapsible bar (in blue) cannot span outside of the header grid component. Is this a limitation of grid layout or am I missing something? so far, I only find questions to avoid overflowing the grid only
If it is a limitation, is there any other way to achieve something similar.