Table Vertical Scroll
Faisal Ahmed
Posted on July 9, 2024
<div class="body-container">
<h2>Heading</h2>
<div class="table-container">
<div class="table-parent">
<table>
<tr class="heading">
<th>One lorem</th>
<th>One lorem</th>
<th>One lorem</th>
<th>One lorem</th>
<th>One lorem</th>
<th>One lorem</th>
<th>One lorem</th>
</tr>
<tr class="content">
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
</tr>
<tr class="content">
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
</tr>
<tr class="content">
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
</tr>
<tr class="content">
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
</tr>
<tr class="content">
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
</tr>
<tr class="content">
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
</tr>
<tr class="content">
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
</tr>
<tr class="content">
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
</tr>
<tr class="content">
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
</tr>
<tr class="content">
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
</tr>
<tr class="content">
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
</tr>
<tr class="content">
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
</tr>
<tr class="content">
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
</tr>
<tr class="content">
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
</tr>
<tr class="content">
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
</tr>
</table>
</div>
</div>
<div class="first-section">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio, corrupti cupiditate? Consectetur voluptate eius
veritatis beatae vitae maiores nulla pariatur corporis vel aliquam qui, placeat nobis recusandae laborum
laboriosam, culpa nostrum rerum velit consequatur harum voluptas ratione nihil. Eos adipisci modi, inventore
exercitationem, reiciendis, excepturi dignissimos maxime veniam animi quibusdam dicta magni dolorum ducimus!
Quibusdam autem voluptatem quasi corporis quia ea voluptatum, culpa dolores officiis ipsa vel, obcaecati est velit
libero ullam? Aspernatur aliquid perferendis saepe tenetur fugiat assumenda. Veniam a consequatur maxime, magni,
maiores tempora corrupti natus, nemo qui velit suscipit praesentium ratione? Voluptas, hic, cumque iusto dolore
maxime blanditiis sed fugit totam, fugiat beatae aliquid facere cupiditate vitae? Sint consequatur quos quisquam
ex vero repellat laborum porro quas repellendus quidem ipsam fuga ad, quasi ducimus amet exercitationem tempora
officia! Earum cumque ab officiis odit quaerat. Quibusdam quam ut provident reiciendis, sed odio est numquam vitae
repellat? Sed esse facere et? Velit recusandae consectetur nulla praesentium, voluptatem quos odit at dignissimos.
Quidem ipsa animi aliquam veniam quas harum saepe earum dolores ipsam minima sit dicta explicabo quasi rerum ex,
dolor ipsum nobis. Suscipit rerum autem ipsum? Veritatis quam repellat consectetur doloribus at inventore earum
rerum obcaecati quibusdam, maiores velit quis quo quidem et ipsum provident nam eum facilis illum eaque, ea
suscipit? Repellat accusantium eum laboriosam similique minima molestias voluptatum corrupti ipsa ipsam distinctio
ea hic quis, aliquid quasi asperiores, ut harum dignissimos suscipit facere dolores nobis! Mollitia ab ex hic quae
dolore fugiat facere ipsam saepe obcaecati? Sapiente molestiae vitae perspiciatis, minima recusandae repellendus
asperiores deleniti fuga illo, distinctio accusamus modi tenetur temporibus minus est iste a! Maxime ipsum eveniet
velit voluptate, iusto error ducimus, porro suscipit reprehenderit accusantium dolorum labore amet accusamus eius
quasi dolores culpa quas quaerat officia incidunt, dignissimos consectetur ipsam! Quo sed voluptas provident
voluptatibus aliquam soluta. Enim dolores rerum dolorum expedita debitis molestias consectetur nihil
necessitatibus ducimus libero alias eum beatae sunt quos, voluptatum sit consequuntur quasi totam laborum
excepturi dolorem, at veritatis sed? Adipisci dolor sed nemo molestias vitae quod omnis at impedit. Labore,
tempore cumque. In vero enim illo consequuntur, accusantium adipisci maxime perferendis deserunt expedita,
veritatis doloribus temporibus non dicta omnis quo. Aliquam voluptate sit quas libero. Deleniti reiciendis, labore
voluptas, temporibus numquam possimus necessitatibus blanditiis cumque rem repudiandae, molestiae nam! Excepturi
mollitia doloribus aut illo eos, numquam quos. Doloremque iusto numquam aliquam delectus eius explicabo esse
blanditiis obcaecati dolore cum eos officia molestias rem amet quasi ducimus, maiores vero voluptates suscipit ex
nam neque, odit et! Accusantium, vero voluptatibus deleniti enim, illo doloremque atque repellat ratione vel
corporis quam rem ipsum pariatur explicabo ipsam voluptate quod possimus dolorum. In unde sapiente, dolorum
molestias ea aspernatur debitis architecto obcaecati laboriosam natus mollitia cum eveniet voluptate consequuntur
similique odio corporis, delectus officiis ullam excepturi? Laboriosam eum cupiditate, asperiores modi enim natus
voluptatibus tempora ad iusto deleniti temporibus doloribus! Consequuntur, magni iusto aliquid consectetur
exercitationem velit nulla numquam nam recusandae deleniti. Odit porro quae nihil. Atque soluta dolor aspernatur
a, corrupti ipsum tempora magni architecto quam animi fugiat ducimus quos facilis maiores. Voluptates error
eveniet, soluta eligendi odit ipsa laborum sapiente fuga, nihil corporis, eos voluptatum magnam a! Autem obcaecati
omnis debitis fuga dicta magni ipsum ut quae libero voluptatum labore quaerat provident praesentium ipsa placeat
dignissimos, iusto distinctio accusantium sapiente animi magnam id ipsam? Accusamus, minus facilis? Recusandae
quia aperiam eaque voluptas beatae adipisci et aspernatur aliquid similique, excepturi at distinctio. Perferendis
explicabo earum repellendus quia sunt totam dicta fugit beatae, sapiente odit harum molestias praesentium quae non
hic ipsa nesciunt quam nihil maxime amet tenetur accusamus? Labore et molestiae provident doloribus eum eos a
aliquam architecto iste, mollitia facere quaerat dolorum ipsa, laboriosam eveniet. Beatae, reiciendis molestias?
Exercitationem aut nobis maiores dolore, laudantium deleniti et tempora temporibus perferendis deserunt quo ex id
hic commodi voluptates voluptas, nisi ratione non alias quidem illum expedita. Sequi autem doloribus est in
reiciendis. Earum consequatur nobis doloremque, incidunt sunt asperiores impedit. Voluptatibus mollitia minima
praesentium id dicta ex assumenda, esse quisquam nulla eos iste ratione blanditiis quia? Numquam praesentium
dolores reiciendis soluta minima! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi iure recusandae
tempore reiciendis delectus atque nemo pariatur, vitae perspiciatis cumque impedit dolor cum esse est aliquid.
Repudiandae facilis ea minima architecto in molestias omnis repellendus dolorem voluptate neque beatae, nostrum,
numquam autem error impedit ratione eaque sapiente aspernatur quae? Harum tenetur ratione dignissimos nulla rem
voluptas dolore error repellat accusantium iusto labore aut beatae atque aliquam odio corrupti corporis,
perspiciatis eum? Mollitia consectetur qui, modi et reiciendis harum velit obcaecati quod quae labore nesciunt
accusamus odio vel fugiat aliquam voluptas blanditiis incidunt nam delectus eos voluptatem asperiores eligendi!
Quaerat ratione voluptate, veritatis atque, labore eum molestias nisi totam, dignissimos est vel inventore! Quia
nobis ad repellat rem laudantium, nostrum, quam cum numquam odit corporis praesentium temporibus veniam dolorem
autem, deserunt officia ea itaque debitis commodi amet unde ipsam qui. Nisi rem, non iure harum nemo beatae
laboriosam nihil soluta quia dolores voluptatum ut, iste, exercitationem omnis natus eum praesentium. Nostrum vero
molestiae nam voluptatem minus odit repudiandae nisi atque eum neque voluptatum earum a explicabo sapiente
repellendus, ut totam ad hic possimus adipisci distinctio eveniet libero? Atque quia porro dolores eveniet
reprehenderit distinctio tenetur officiis cumque ea magni at consequuntur quos delectus inventore, facilis quidem
dolorem? Modi explicabo numquam in facere praesentium sint deleniti maiores voluptates tenetur quos fugit commodi
laborum ratione facilis adipisci, repellat illo molestiae et totam corrupti! Debitis nulla sed minima quibusdam
veritatis sapiente quas earum natus! Quidem ut repudiandae, aliquid id similique ducimus, iure est sequi labore
repellat nulla ab reiciendis qui? Minima sequi deserunt quam sunt suscipit voluptas aspernatur cumque totam
asperiores natus enim consectetur aperiam, assumenda sint mollitia facere vero veniam explicabo atque dicta culpa.
Obcaecati soluta atque odio quo voluptatum officiis quibusdam quis itaque, fuga aliquam accusantium voluptatem
perspiciatis dicta possimus sequi, iure inventore omnis dolor numquam. Omnis ratione facilis vel placeat totam
dicta, tenetur animi est? Aut modi molestiae accusamus voluptatibus natus aliquid, officiis quo neque molestias,
nemo eligendi error nostrum. Amet vel, quidem quas ut pariatur rerum corporis aliquid dignissimos veniam, corrupti
eligendi sed obcaecati temporibus suscipit quae? Autem, ut minima impedit architecto ea corrupti dolore saepe
porro obcaecati debitis tempora veritatis aliquid fuga aspernatur distinctio ullam repellendus sed illo? Odio,
voluptates exercitationem consectetur harum velit numquam sunt maxime a aspernatur nihil, quod laborum corporis
officia. Nemo, earum. Temporibus vel cumque dolorem, eius assumenda ullam neque itaque incidunt repellat
consequatur quo! Excepturi omnis cum, fuga eos at blanditiis! Voluptatum laborum at aliquid nemo molestiae,
distinctio corrupti ad modi. Commodi eum atque hic. In laudantium quos distinctio nam ad suscipit explicabo eum,
cupiditate aliquam quia et dolores ducimus molestias modi alias recusandae unde veniam dicta nulla, dolor
repudiandae rerum deleniti corporis vel! Qui eum odit modi, rerum accusamus asperiores commodi delectus sint et,
reprehenderit nihil soluta. Assumenda ab, aut eaque mollitia, soluta, suscipit et eius corrupti quas repellat
totam alias eos nam iusto. Quas nam inventore sint, vero perferendis nemo, omnis voluptas vitae aliquam,
architecto fugiat eius? Deserunt sapiente temporibus cupiditate placeat facilis nam ipsam nostrum voluptas beatae?
Fuga vitae suscipit facilis ullam iure repellendus aliquam eveniet aut asperiores, eaque a voluptates consequuntur
fugit ipsam voluptatum placeat error, veniam repellat natus. Optio culpa cumque, perferendis odit tenetur dolorum
illo sint hic nesciunt enim temporibus asperiores laudantium ducimus voluptatem unde nihil et est, voluptatibus
accusamus consectetur aspernatur? Aspernatur eligendi ad perspiciatis ullam saepe eos, dolores et at nostrum,
distinctio blanditiis porro maxime iusto asperiores ipsam laudantium, ipsa deleniti quisquam mollitia quos
repudiandae? Accusantium consectetur odio corporis distinctio dolor, minus omnis sapiente suscipit beatae quasi
repellendus molestiae amet minima natus ex architecto assumenda, nesciunt voluptatum laudantium, impedit pariatur
maxime iusto porro! A impedit quibusdam eum assumenda dolor fugiat praesentium alias, molestiae molestias quos
dolores ea at adipisci. Perferendis totam tempora incidunt, porro reprehenderit nihil eum, pariatur commodi
dolores tempore natus dignissimos suscipit. Nemo, sequi nam saepe minus laborum voluptatibus corrupti porro atque
architecto tempore voluptatem voluptates consequuntur officia quae sapiente eligendi facere debitis? Soluta vero
ipsam recusandae exercitationem iusto cumque neque illum accusantium commodi sunt. Laudantium, atque earum! Nemo
tenetur sunt alias tempora consequuntur voluptatem molestias omnis fuga, ab cumque natus neque, cum totam odio
dolorum asperiores, itaque saepe excepturi amet. Dolor, est architecto. Error ducimus inventore suscipit facilis
officia? Tempora, voluptatum rem! Nisi consequatur et vel totam quisquam. Architecto amet porro dolores nisi
eligendi repellendus nemo dolorem ut quos vitae. Eaque blanditiis, sed officiis culpa illum quam deserunt nostrum
velit facere illo delectus deleniti impedit. Omnis animi sunt voluptas minima voluptatum rem, quaerat, expedita
quasi praesentium magni, eligendi quos et esse? Et illo distinctio nobis at sint necessitatibus autem numquam
fugiat debitis ipsam accusamus delectus, dolorum aspernatur quibusdam atque consequuntur odio id ex temporibus
perferendis molestiae corporis. Doloribus dolores voluptatum beatae, iste minus quasi excepturi repellendus
assumenda temporibus id soluta laboriosam nihil ducimus, modi deserunt reiciendis laudantium maxime quisquam nisi
cum architecto necessitatibus nostrum explicabo ad! Neque voluptatibus eveniet ipsam cum voluptas fugit ut.</p>
</div>
</div>
h2 {
height: 40px;
background: goldenrod;
}
.table-container {
margin-top: 30px;
border: 1px solid red;
max-width: 500px;
width: 100%;
max-height: 300px;
overflow: auto;
}
.heading {
background-color: blue;
color: red;
position: sticky;
left: 0;
top: 0;
}
.content {
td {
color: green;
background-color: yellow;
}
}
💖 💪 🙅 🚩
Faisal Ahmed
Posted on July 9, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.