Table Vertical Scroll

<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;
    }
}