Table with horizontal scroll with sticky left column and sticky header on top of screen

Question

I want to create a table with a horizontal scroll and a sticky left column and a sticky header on top of the screen. The table is wide, so I want to scroll it horizontally, but I need to make the first left column sticky. I also need to make the first row (header) sticky on top of the screen when the page is scrolled down. I don't know if these two options are compatible together. I've tried almost everything. Here is my latest code, which almost works, but the first row is not scrolling with the rest of the table. It could be made of divs or table elements, it doesn't matter.

I want to avoid using JavaScript.

 body { background: #F5F7FA; overflow-x: hidden; }.wrap { position: relative; margin: 10em auto 30em; max-width: 960px; overscroll-behavior: contain; }.headers { top: 0; position: -webkit-sticky; position: sticky; z-index: 1; }.tracks, .scroller { display: flex; 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 { flex: 1 0 calc(22% + 2px); scroll-snap-align: start; }.track.first { position: sticky; left: 0; }.sticky { position: sticky; top: 0; }.track +.track { margin-left: -1px; }.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; } @media (max-width: 767px) {.track { flex: 1 0 calc(50% + 7px); } }

 <div class="wrap"> <div class="headers"> <div class="scroller"> <div class="track"> <div class="heading">Heading 1</div> </div> <div class="track"> <div class="heading">Heading 2</div> </div> <div class="track"> <div class="heading">Heading 3</div> </div> <div class="track"> <div class="heading">Heading 4</div> </div> <div class="track"> <div class="heading">Heading 5</div> </div> </div> </div> <div class="tracks"> <div class="track first"> <div class="entry"> <h3>Lorem, ipsum dolor.</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> <div class="track"> <div class="entry"> <h3>Lorem, ipsum dolor.</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> <div class="track"> <div class="entry"> <h3>Lorem, ipsum dolor.</h3> </div> <div class="entry"> <h3>Lorem, ipsum.</h3> </div> </div> </div> </div>

Option 1: Header scrolls with the rest of the table. Option 2: Completely different solution with the same result.

Answer 1

This is what it should look like, but without using JavaScript only with pure CSS.

 function scrollSynchronization() { const wrapper1 = document.querySelector('.scroller'); const wrapper2 = document.querySelector('.tracks'); wrapper1.addEventListener('scroll', function() { wrapper2.scrollLeft = wrapper1.scrollLeft; }); wrapper2.addEventListener('scroll', function() { wrapper1.scrollLeft = wrapper2.scrollLeft; }); } scrollSynchronization();

 body { background: #F5F7FA; overflow-x: hidden; }.wrap { position: relative; margin: 10em auto 30em; max-width: 960px; }.headers { top: 0; position: -webkit-sticky; position: sticky; z-index: 1; }.tracks, .scroller { display: flex; overflow-y: hidden; }.scroller { overflow-x: scroll; }.tracks { overflow: auto; }.scenes::-webkit-scrollbar, .scroller::-webkit-scrollbar { display: none; }.track { flex: 1 0 calc(22% + 2px); }.track.first { position: sticky; left: 0; }.sticky { position: sticky; top: 0; }.track +.track { margin-left: -1px; }.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; } @media (max-width: 767px) {.track { flex: 1 0 calc(50% + 7px); } }

 <div class="wrap"> <div class="headers"> <div class="scroller"> <div class="track"> <div class="heading">Heading 1</div> </div> <div class="track"> <div class="heading">Heading 2</div> </div> <div class="track"> <div class="heading">Heading 3</div> </div> <div class="track"> <div class="heading">Heading 4</div> </div> <div class="track"> <div class="heading">Heading 5</div> </div> </div> </div> <div class="tracks"> <div class="track first"> <div class="entry"> <h3>Lorem, ipsum dolor.</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> <div class="track"> <div class="entry"> <h3>Lorem, ipsum dolor.</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> <div class="track"> <div class="entry"> <h3>Lorem, ipsum dolor.</h3> </div> <div class="entry"> <h3>Lorem, ipsum.</h3> </div> </div> </div> </div>