tldr: try the snippet below, is there a way to implement it without (or with less) js?
I got some UI with a few requirements:
- A table with sticky top header
- The content is quite wide, so the whole thing needs to scroll horizontally
- It will be inserted into a page with some content around it. If the user is viewing the table, the above and below content should be hidden
- There should only be one scroll bar, the user should not need to scroll the table separately from the page.
I tried using postition: sticky and overflow-x: scroll only, but it seems the header only sticks to the horizontally scrolling container, it doesn’t stick to the viewport.
My current idea is have two containers in the document, on the same level as the other content. But that means I have to synchronize the horizontal scroll position and propagate the size of the table cells to the header. (the demo below didn’t do that since I hardcoded the width of the cells.)
Is there a better way to do this? Preferably without (or with less) js?
const header = document.querySelector(".header");
const grid = document.querySelector(".grid");
let updating = false;
grid.addEventListener("scroll", () => {
if (header.scrollLeft === grid.scrollLeft) return;
// console.log("grid -> header");
header.scrollLeft = grid.scrollLeft;
});
header.addEventListener("scroll", () => {
if (header.scrollLeft === grid.scrollLeft) return;
// console.log("header -> grid");
grid.scrollLeft = header.scrollLeft;
});.content {
max-width: 60rem;
margin: 0 auto;
background-color: rgb(240, 245, 255);
}
.header {
display: flex;
flex-direction: row;
max-width: 100%;
overflow: scroll auto;
position: sticky;
top: 0;
}
.header-cell {
flex: 0 0 100px;
width: 100px;
height: 100px;
background-color: rgb(220, 185, 255);
}
.header-cell:nth-child(2n) {
background-color: rgb(255, 179, 249);
}
.grid {
display: grid;
grid-template-columns: repeat(20, auto);
max-width: 100%;
overflow: scroll auto;
}
.grid-cell {
width: 100px;
height: 100px;
background-color: rgb(188, 255, 185);
}
.grid-cell:nth-child(3n) {
background-color: rgb(213, 255, 229);
}
.grid-cell:nth-child(3n + 1) {
background-color: rgb(212, 255, 182);
}<div class="content">
<p>
Dicta maiores adipisci debitis sit velit deserunt expedita! Repellat similique error pariatur corrupti dolores itaque quam voluptates harum ipsa. Excepturi!
</p>
<p>
Obcaecati consequuntur adipisci qui, sint earum omnis odio voluptas facere consequatur maxime ea cumque, doloremque dolore laborum iste, suscipit nostrum?
</p>
<p>
Ducimus architecto tempore magni quae, reiciendis mollitia fuga harum minus perspiciatis explicabo eius, reprehenderit at voluptates temporibus, atque quis blanditiis?
</p>
<p>
Modi illum, eveniet quidem ad neque impedit unde distinctio atque, corporis, earum at exercitationem dolor doloribus suscipit adipisci ducimus omnis.
</p>
<p>
Voluptas impedit nostrum velit odit. Voluptatibus, nemo. Quas eveniet ad architecto aliquid perferendis illum perspiciatis obcaecati facilis. Accusantium, accusamus! Corrupti!
</p>
<p>
Porro commodi quisquam numquam, nam laboriosam magnam eos voluptatem doloribus voluptate minima asperiores, aliquid non velit repudiandae, voluptatibus rerum debitis.
</p>
<p>
Et deleniti totam, consectetur aliquam sed quisquam odit quia cum omnis obcaecati maxime quis! Saepe eum explicabo doloremque tenetur amet?
</p>
<p>
Dolorum in debitis labore eum, neque voluptas necessitatibus? Vero placeat officia ipsum nam quisquam possimus eum excepturi quis dignissimos voluptatem.
</p>
<div class="sticky-container">
<div class="header">
<div class="header-cell">Lorem, ipsum.</div>
<div class="header-cell">Sapiente, eius.</div>
<div class="header-cell">Doloribus, veritatis.</div>
<div class="header-cell">Mollitia, hic.</div>
<div class="header-cell">Blanditiis, eligendi.</div>
<div class="header-cell">Eius, cupiditate!</div>
<div class="header-cell">Facere, harum!</div>
<div class="header-cell">Eum, fugit.</div>
<div class="header-cell">Quod, dolore!</div>
<div class="header-cell">Doloribus, amet?</div>
<div class="header-cell">Pariatur, inventore.</div>
<div class="header-cell">Distinctio, esse?</div>
<div class="header-cell">Reiciendis, delectus.</div>
<div class="header-cell">Tempora, corrupti.</div>
<div class="header-cell">Iure, architecto!</div>
<div class="header-cell">Iste, adipisci.</div>
<div class="header-cell">Temporibus, sunt.</div>
<div class="header-cell">Voluptatibus, repellendus!</div>
<div class="header-cell">Quibusdam, autem.</div>
<div class="header-cell">Tempora, magnam!</div>
</div>
<div class="grid">
<div class="grid-cell">Lorem, ipsum.</div>
<div class="grid-cell">Aliquid, reprehenderit?</div>
<div class="grid-cell">Nesciunt, eaque?</div>
<div class="grid-cell">Labore, illo.</div>
<div class="grid-cell">Reiciendis, eius!</div>
<div class="grid-cell">Nesciunt, id.</div>
<div class="grid-cell">Nam, velit!</div>
<div class="grid-cell">Ipsam, quas.</div>
<div class="grid-cell">Natus, corrupti!</div>
<div class="grid-cell">Minus, tempora.</div>
<div class="grid-cell">Delectus, aliquid.</div>
<div class="grid-cell">Molestiae, sapiente!</div>
<div class="grid-cell">Eius, quaerat!</div>
<div class="grid-cell">Iure, aperiam?</div>
<div class="grid-cell">Laudantium, deserunt?</div>
<div class="grid-cell">Ipsam, libero!</div>
<div class="grid-cell">Fugit, dicta!</div>
<div class="grid-cell">Repellat, ea.</div>
<div class="grid-cell">Impedit, ipsa.</div>
<div class="grid-cell">Quas, libero?</div>
<div class="grid-cell">Doloremque, minima!</div>
<div class="grid-cell">Commodi, aspernatur?</div>
<div class="grid-cell">Laboriosam, provident.</div>
<div class="grid-cell">Doloribus, dolores.</div>
<div class="grid-cell">A, ratione?</div>
<div class="grid-cell">Tempore, perferendis?</div>
<div class="grid-cell">Cupiditate, quo.</div>
<div class="grid-cell">Cum, maiores.</div>
<div class="grid-cell">Atque, reiciendis!</div>
<div class="grid-cell">Eaque, a.</div>
<div class="grid-cell">Tempore, modi.</div>
<div class="grid-cell">Alias, qui.</div>
<div class="grid-cell">Ad, voluptates?</div>
<div class="grid-cell">Reprehenderit, unde.</div>
<div class="grid-cell">Provident, autem!</div>
<div class="grid-cell">Possimus, quidem.</div>
<div class="grid-cell">Sapiente, soluta.</div>
<div class="grid-cell">Possimus, in.</div>
<div class="grid-cell">Non, incidunt?</div>
<div class="grid-cell">In, unde.</div>
<div class="grid-cell">Tempora, enim.</div>
<div class="grid-cell">Amet, quaerat?</div>
<div class="grid-cell">Molestias, deserunt!</div>
<div class="grid-cell">Nihil, quis.</div>
<div class="grid-cell">Commodi, provident!</div>
<div class="grid-cell">Inventore, quibusdam.</div>
<div class="grid-cell">Velit, accusamus!</div>
<div class="grid-cell">Culpa, possimus.</div>
<div class="grid-cell">Magni, ipsum.</div>
<div class="grid-cell">Dolore, veniam.</div>
<div class="grid-cell">Molestiae, eius.</div>
<div class="grid-cell">Aut, iusto!</div>
<div class="grid-cell">Magni, tempora.</div>
<div class="grid-cell">Vel, sunt.</div>
<div class="grid-cell">Odit, consequatur!</div>
<div class="grid-cell">Ipsam, officiis!</div>
<div class="grid-cell">Delectus, veniam.</div>
<div class="grid-cell">Accusantium, beatae.</div>
<div class="grid-cell">Quod, repudiandae!</div>
<div class="grid-cell">Nostrum, impedit?</div>
<div class="grid-cell">Quas, veniam.</div>
<div class="grid-cell">Corrupti, officia.</div>
<div class="grid-cell">Eveniet, odit.</div>
<div class="grid-cell">Necessitatibus, officia?</div>
<div class="grid-cell">Alias, magni.</div>
<div class="grid-cell">Tempore, voluptas.</div>
<div class="grid-cell">Molestiae, voluptatum?</div>
<div class="grid-cell">Necessitatibus, rem.</div>
<div class="grid-cell">Sequi, molestiae.</div>
<div class="grid-cell">Impedit, accusantium.</div>
<div class="grid-cell">Dolorem, autem.</div>
<div class="grid-cell">Laborum, reprehenderit.</div>
<div class="grid-cell">Ea, dolor.</div>
<div class="grid-cell">Dolorem, quos.</div>
<div class="grid-cell">Dolorem, cupiditate!</div>
<div class="grid-cell">Perferendis, optio?</div>
<div class="grid-cell">Asperiores, natus!</div>
<div class="grid-cell">Ad, at?</div>
<div class="grid-cell">Quibusdam, earum!</div>
<div class="grid-cell">Enim, saepe?</div>
<div class="grid-cell">Ad, laudantium!</div>
<div class="grid-cell">Sit, minus.</div>
<div class="grid-cell">Ratione, repellendus.</div>
<div class="grid-cell">Nobis, tempora.</div>
<div class="grid-cell">Aliquam, commodi?</div>
<div class="grid-cell">Est, dicta!</div>
<div class="grid-cell">Iure, nihil?</div>
<div class="grid-cell">Reprehenderit, quod.</div>
<div class="grid-cell">Cupiditate, natus?</div>
<div class="grid-cell">Accusamus, ducimus!</div>
<div class="grid-cell">Hic, commodi.</div>
<div class="grid-cell">Quia, recusandae.</div>
<div class="grid-cell">Optio, laudantium?</div>
<div class="grid-cell">Quam, ducimus.</div>
<div class="grid-cell">Necessitatibus, enim?</div>
<div class="grid-cell">Molestias, neque.</div>
<div class="grid-cell">Esse, ratione!</div>
<div class="grid-cell">Non, quia!</div>
<div class="grid-cell">Harum, a.</div>
<div class="grid-cell">Nulla, vero?</div>
<div class="grid-cell">Ab, dolore.</div>
<div class="grid-cell">Ex, earum.</div>
<div class="grid-cell">Ullam, autem!</div>
<div class="grid-cell">Porro, inventore.</div>
<div class="grid-cell">Velit, ipsa?</div>
<div class="grid-cell">Illum, itaque.</div>
<div class="grid-cell">Quia, impedit!</div>
<div class="grid-cell">Molestiae, nihil.</div>
<div class="grid-cell">Sequi, officia!</div>
<div class="grid-cell">Numquam, maxime?</div>
<div class="grid-cell">Nemo, repudiandae.</div>
<div class="grid-cell">Libero, ut!</div>
<div class="grid-cell">Et, recusandae.</div>
<div class="grid-cell">Porro, ea.</div>
<div class="grid-cell">Eaque, eos.</div>
<div class="grid-cell">Rerum, voluptas.</div>
<div class="grid-cell">Voluptatibus, ab?</div>
<div class="grid-cell">Quasi, numquam!</div>
<div class="grid-cell">Tenetur, non.</div>
<div class="grid-cell">Recusandae, repudiandae.</div>
<div class="grid-cell">Et, voluptate?</div>
<div class="grid-cell">Enim, recusandae.</div>
<div class="grid-cell">Repellendus, veniam.</div>
<div class="grid-cell">Error, eum!</div>
<div class="grid-cell">Quo, cupiditate.</div>
<div class="grid-cell">Aspernatur, vel?</div>
<div class="grid-cell">Vero, officiis!</div>
<div class="grid-cell">Veniam, maiores.</div>
<div class="grid-cell">Quis, repellendus.</div>
<div class="grid-cell">Laudantium, corrupti.</div>
<div class="grid-cell">Tempore, nostrum!</div>
<div class="grid-cell">Unde, reiciendis.</div>
<div class="grid-cell">Id, nihil!</div>
<div class="grid-cell">Ex, aliquam.</div>
<div class="grid-cell">Magnam, placeat?</div>
<div class="grid-cell">Laborum, inventore?</div>
<div class="grid-cell">Quae, ab.</div>
<div class="grid-cell">Qui, alias!</div>
<div class="grid-cell">Quas, ab?</div>
<div class="grid-cell">Dolores, exercitationem?</div>
<div class="grid-cell">Quos, autem.</div>
<div class="grid-cell">Quibusdam, nostrum.</div>
<div class="grid-cell">Ipsam, est?</div>
<div class="grid-cell">Optio, molestiae.</div>
<div class="grid-cell">Voluptates, incidunt.</div>
<div class="grid-cell">Eligendi, ipsa.</div>
<div class="grid-cell">Vel, fuga!</div>
<div class="grid-cell">Neque, architecto?</div>
<div class="grid-cell">Neque, optio!</div>
<div class="grid-cell">Magnam, hic.</div>
<div class="grid-cell">Aut, molestias.</div>
<div class="grid-cell">Expedita, laudantium.</div>
<div class="grid-cell">Accusantium, placeat.</div>
<div class="grid-cell">Ipsa, non?</div>
<div class="grid-cell">Quam, labore!</div>
<div class="grid-cell">Corporis, debitis.</div>
<div class="grid-cell">Numquam, sed?</div>
<div class="grid-cell">Rerum, consequatur.</div>
<div class="grid-cell">Illo, natus?</div>
<div class="grid-cell">Impedit, dolorum!</div>
<div class="grid-cell">Dolorem, obcaecati.</div>
<div class="grid-cell">Explicabo, soluta!</div>
<div class="grid-cell">Voluptates, reprehenderit?</div>
<div class="grid-cell">Ex, repellendus?</div>
<div class="grid-cell">Doloremque, sapiente!</div>
<div class="grid-cell">Vero, esse!</div>
<div class="grid-cell">Asperiores, quidem!</div>
<div class="grid-cell">Similique, illo!</div>
<div class="grid-cell">Soluta, asperiores?</div>
<div class="grid-cell">Magnam, modi!</div>
<div class="grid-cell">Hic, possimus.</div>
<div class="grid-cell">Quod, deleniti.</div>
<div class="grid-cell">Repellat, eius?</div>
<div class="grid-cell">Dignissimos, laboriosam.</div>
<div class="grid-cell">Odio, inventore.</div>
<div class="grid-cell">Quidem, esse.</div>
<div class="grid-cell">Quo, ipsum?</div>
<div class="grid-cell">Optio, impedit.</div>
<div class="grid-cell">Cumque, est!</div>
<div class="grid-cell">Iure, officia?</div>
<div class="grid-cell">Sit, ad!</div>
<div class="grid-cell">Distinctio, deleniti?</div>
<div class="grid-cell">Neque, deleniti!</div>
<div class="grid-cell">Aut, nostrum.</div>
<div class="grid-cell">Cumque, iusto.</div>
<div class="grid-cell">Ut, optio.</div>
<div class="grid-cell">Quasi, debitis.</div>
<div class="grid-cell">Quas, repellat.</div>
<div class="grid-cell">Facere, debitis?</div>
<div class="grid-cell">Quae, praesentium.</div>
<div class="grid-cell">Repellat, perspiciatis?</div>
<div class="grid-cell">Nemo, in.</div>
<div class="grid-cell">Error, eum.</div>
<div class="grid-cell">Dicta, corrupti.</div>
<div class="grid-cell">Distinctio, recusandae!</div>
<div class="grid-cell">Obcaecati, quis!</div>
<div class="grid-cell">Iusto, repellat!</div>
<div class="grid-cell">Illo, repellendus!</div>
<div class="grid-cell">Labore, ut.</div>
<div class="grid-cell">Quam, amet.</div>
<div class="grid-cell">Mollitia, iure!</div>
<div class="grid-cell">Recusandae, delectus!</div>
<div class="grid-cell">Suscipit, quod!</div>
<div class="grid-cell">Quaerat, omnis!</div>
<div class="grid-cell">Placeat, sunt.</div>
<div class="grid-cell">Sint, possimus!</div>
<div class="grid-cell">Aspernatur, explicabo.</div>
<div class="grid-cell">Asperiores, provident!</div>
<div class="grid-cell">Aliquid, facilis.</div>
<div class="grid-cell">Totam, adipisci?</div>
<div class="grid-cell">Temporibus, labore.</div>
<div class="grid-cell">Qui, placeat.</div>
<div class="grid-cell">Accusamus, repellendus.</div>
<div class="grid-cell">Adipisci, molestias.</div>
<div class="grid-cell">Tempora, laudantium.</div>
<div class="grid-cell">Omnis, accusantium?</div>
<div class="grid-cell">Esse, eius!</div>
<div class="grid-cell">Possimus, perspiciatis!</div>
<div class="grid-cell">Distinctio, provident.</div>
<div class="grid-cell">Aliquam, corporis.</div>
<div class="grid-cell">Delectus, similique?</div>
<div class="grid-cell">Quod, facilis.</div>
<div class="grid-cell">Repudiandae, ex.</div>
<div class="grid-cell">Tempore, illo.</div>
<div class="grid-cell">Pariatur, cum?</div>
<div class="grid-cell">Et, nemo.</div>
<div class="grid-cell">Illo, nam!</div>
<div class="grid-cell">Maiores, vero.</div>
<div class="grid-cell">Ipsum, quae!</div>
<div class="grid-cell">Est, sit.</div>
<div class="grid-cell">Voluptates, quis?</div>
<div class="grid-cell">Quaerat, voluptates?</div>
<div class="grid-cell">Enim, ea.</div>
<div class="grid-cell">Consectetur, quod.</div>
<div class="grid-cell">Cum, aspernatur?</div>
<div class="grid-cell">Eligendi, tempore!</div>
<div class="grid-cell">Iste, nesciunt.</div>
<div class="grid-cell">Dolor, molestiae.</div>
<div class="grid-cell">Fugiat, maxime?</div>
<div class="grid-cell">Accusamus, perspiciatis.</div>
<div class="grid-cell">Aperiam, itaque.</div>
<div class="grid-cell">Maiores, aut!</div>
<div class="grid-cell">Iste, nemo?</div>
<div class="grid-cell">Omnis, eius!</div>
<div class="grid-cell">Corporis, eligendi.</div>
<div class="grid-cell">Quos, minima?</div>
<div class="grid-cell">Iusto, reiciendis.</div>
<div class="grid-cell">Inventore, explicabo!</div>
<div class="grid-cell">Mollitia, voluptatem.</div>
<div class="grid-cell">Odit, aliquam!</div>
<div class="grid-cell">Fugiat, ducimus.</div>
<div class="grid-cell">Nam, quos.</div>
<div class="grid-cell">Temporibus, distinctio?</div>
<div class="grid-cell">Sapiente, assumenda.</div>
<div class="grid-cell">Nobis, accusamus!</div>
<div class="grid-cell">Enim, tenetur?</div>
<div class="grid-cell">Inventore, deserunt.</div>
<div class="grid-cell">Assumenda, nesciunt!</div>
<div class="grid-cell">Impedit, ratione?</div>
<div class="grid-cell">Perferendis, neque.</div>
<div class="grid-cell">Pariatur, animi?</div>
<div class="grid-cell">Cumque, fugiat?</div>
<div class="grid-cell">Cupiditate, iste.</div>
<div class="grid-cell">Totam, et.</div>
<div class="grid-cell">Officiis, ex!</div>
<div class="grid-cell">Autem, voluptate!</div>
<div class="grid-cell">Ea, sint!</div>
<div class="grid-cell">Ipsa, quaerat!</div>
<div class="grid-cell">Veniam, perferendis.</div>
<div class="grid-cell">Quaerat, quam.</div>
<div class="grid-cell">Dolorem, consequuntur.</div>
<div class="grid-cell">Corporis, consequatur.</div>
<div class="grid-cell">Impedit, quod.</div>
<div class="grid-cell">Dolor, laudantium.</div>
<div class="grid-cell">Blanditiis, in?</div>
<div class="grid-cell">Sint, ad.</div>
<div class="grid-cell">Nemo, quo?</div>
<div class="grid-cell">Blanditiis, ducimus.</div>
<div class="grid-cell">Molestias, facilis?</div>
<div class="grid-cell">Dolorem, quae.</div>
<div class="grid-cell">Illo, facilis.</div>
<div class="grid-cell">Numquam, illum!</div>
<div class="grid-cell">Porro, delectus!</div>
<div class="grid-cell">Facere, soluta.</div>
<div class="grid-cell">Omnis, repellendus!</div>
<div class="grid-cell">Inventore, expedita.</div>
<div class="grid-cell">Maxime, maiores.</div>
<div class="grid-cell">Odit, vero?</div>
<div class="grid-cell">Reiciendis, possimus.</div>
<div class="grid-cell">Voluptatibus, inventore!</div>
<div class="grid-cell">Voluptate, ab?</div>
<div class="grid-cell">Labore, eius!</div>
<div class="grid-cell">Aliquid, ipsam!</div>
<div class="grid-cell">Ex, eligendi.</div>
<div class="grid-cell">Exercitationem, optio!</div>
<div class="grid-cell">Cupiditate, blanditiis.</div>
<div class="grid-cell">Minima, consectetur.</div>
<div class="grid-cell">Necessitatibus, et.</div>
<div class="grid-cell">Deserunt, dicta!</div>
<div class="grid-cell">Non, sed.</div>
<div class="grid-cell">Officia, sit!</div>
<div class="grid-cell">Esse, commodi?</div>
<div class="grid-cell">Hic, odit.</div>
<div class="grid-cell">Eius, expedita.</div>
<div class="grid-cell">Nam, voluptatem!</div>
<div class="grid-cell">Eligendi, vero.</div>
<div class="grid-cell">Saepe, fugit?</div>
<div class="grid-cell">Molestias, vero?</div>
<div class="grid-cell">Vitae, nobis!</div>
<div class="grid-cell">Neque, adipisci!</div>
<div class="grid-cell">Nulla, harum.</div>
<div class="grid-cell">Recusandae, accusantium.</div>
<div class="grid-cell">Quae, voluptate?</div>
<div class="grid-cell">Placeat, amet.</div>
<div class="grid-cell">Repudiandae, omnis?</div>
<div class="grid-cell">Voluptatum, dolores!</div>
<div class="grid-cell">Similique, inventore?</div>
<div class="grid-cell">Dolore, asperiores.</div>
<div class="grid-cell">Suscipit, corporis.</div>
<div class="grid-cell">Consequatur, porro!</div>
<div class="grid-cell">Exercitationem, explicabo?</div>
<div class="grid-cell">Reiciendis, inventore.</div>
<div class="grid-cell">Architecto, commodi!</div>
<div class="grid-cell">Officia, tempora.</div>
<div class="grid-cell">Temporibus, eligendi.</div>
<div class="grid-cell">Quasi, recusandae?</div>
</div>
</div>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ratione error optio vel ea adipisci nulla soluta nostrum earum, cum sapiente?
</p>
<p>
Eligendi autem illum cum possimus a! Voluptatem necessitatibus ipsum sapiente, inventore, repellendus tempora omnis reprehenderit et minus voluptas aspernatur iste.
</p>
<p>
Esse error porro dolore itaque? Maiores excepturi accusamus, pariatur tempore harum voluptate quis odit nostrum tenetur nemo, eum, doloremque neque?
</p>
<p>
Soluta aut unde est voluptatum eius maxime. Voluptate qui laborum est, placeat hic delectus ipsam reprehenderit dolor accusamus veritatis ut?
</p>
<p>
Pariatur, saepe reprehenderit odit asperiores, dolores quas minus libero quidem aperiam dolore molestias optio ut voluptates a eum laboriosam quis?
</p>
<p>
Ex ipsa nobis iste temporibus obcaecati nemo inventore natus error quis, labore perspiciatis dolor quia magni! Fugit odio id minus.
</p>
<p>
Consequatur nihil beatae commodi quaerat excepturi nulla sapiente odit sequi illo, quam accusantium ullam ut blanditiis saepe doloribus ex optio!
</p>
<p>
Illum laudantium, deserunt eos excepturi odit, nostrum cupiditate voluptas mollitia facere architecto perspiciatis consequatur recusandae ad cum maiores unde nihil.
</p>
<p>
Aspernatur assumenda autem magnam, et vero nostrum repudiandae ad error neque commodi, quidem beatae perspiciatis qui sequi provident laborum porro?
</p>
<p>
Tempora possimus saepe natus, tempore adipisci quis ducimus. Quis incidunt quasi cupiditate libero commodi fugit voluptate neque asperiores autem nostrum?
</p>
<p>
Consectetur debitis ab libero, optio obcaecati culpa quam repellat ad ex doloremque quod eaque aliquid voluptates aspernatur reiciendis, provident eveniet.
</p>
<p>
Vel at repudiandae libero itaque, praesentium necessitatibus maxime eligendi quas, nihil dignissimos, debitis consectetur rerum animi fuga excepturi pariatur commodi.
</p>
<p>
Debitis itaque eos eaque enim provident suscipit voluptates impedit consectetur est. Porro ipsam iusto impedit ipsum, dignissimos architecto minima reiciendis.
</p>
<p>
Veritatis debitis voluptatum, repudiandae temporibus enim modi natus recusandae doloremque. Perspiciatis quae eos et, placeat soluta delectus quibusdam autem quasi.
</p>
<p>
Accusantium commodi debitis dicta maxime maiores illum nulla nostrum distinctio hic libero amet omnis ducimus nobis, id ipsa aliquid pariatur.
</p>
<p>
Accusamus dignissimos maxime eius provident sit architecto quasi, fuga pariatur, eveniet iste nesciunt quibusdam perspiciatis velit cupiditate beatae ex modi!
</p>
<p>
Nulla aliquid architecto autem repellendus aut, nam ea obcaecati incidunt, debitis at veniam sunt porro. Molestias totam quisquam sint voluptatum!
</p>
<p>
Quibusdam eaque sunt, optio cupiditate ab, eveniet distinctio, minima assumenda esse blanditiis dignissimos. Possimus, ut. Quia distinctio ut saepe dignissimos!
</p>
<p>
Hic itaque nobis consectetur odio aut sed quos enim possimus cumque doloribus deserunt reiciendis veniam optio, saepe labore officia tenetur?
</p>
<p>
Animi quibusdam doloribus repudiandae itaque consectetur cum, doloremque temporibus, necessitatibus culpa velit quo voluptates obcaecati sint ullam nisi, exercitationem est.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat quidem perspiciatis omnis. Cupiditate ipsam nobis, odit hic voluptatibus beatae nemo?
</p>
<p>
Ipsa veritatis sit iure nostrum officiis at sint? Numquam ea odio similique aut officia nostrum. Fugiat praesentium a ullam expedita?
</p>
<p>
Dolore molestiae exercitationem iste repellat distinctio quis molestias? Quo quos velit officia eligendi doloribus? Explicabo ratione quidem facere aut provident.
</p>
<p>
Possimus, vitae. Impedit earum et similique. Vero nostrum obcaecati nihil illum. Officiis veniam expedita veritatis est ut beatae ducimus eligendi!
</p>
<p>
Nobis assumenda aliquam eius atque quisquam tenetur laudantium, maiores aut similique magni quidem vitae iure sint reiciendis excepturi nisi quia!
</p>
<p>
Culpa inventore animi sed quis illum rem odit, sint doloremque, necessitatibus reiciendis et eveniet, explicabo quam unde ipsam. Distinctio, impedit!
</p>
<p>
Inventore quas ipsam blanditiis itaque tempora minima atque saepe quia provident, accusantium officiis quos optio autem officia in. Libero, quam?
</p>
<p>
Necessitatibus modi voluptate possimus, itaque voluptates aut odio in vitae, quod voluptatem porro consequatur facere dolor nobis recusandae! Maxime, quidem.
</p>
<p>
Eveniet ratione facere mollitia placeat asperiores explicabo magni aspernatur rem. Vero, eum perspiciatis quam minus est quo. Minima, repellendus pariatur.
</p>
<p>
Nihil minima odio possimus quidem, quasi, quis dolorem, natus rerum maiores facere debitis aliquam incidunt! Nisi similique officia asperiores distinctio.
</p>
<p>
Corporis, ipsam fugiat! Fugit accusamus sapiente nobis quisquam fuga porro dolore natus libero, modi ipsa dignissimos in debitis quos laudantium?
</p>
</div>
2
Answers
You can use 2 tables: one is for the table header and the other is for the actual content. Then, hide the header in the second table.