JSFiddle - React, Tailwind, and code Playground

by PaulGibson

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html lang="en" class="overflow-hidden">

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title> - ScrollTableTest</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  </head>

  <body>
    <div b-vtqmm3i4v1 class="container-fluid overflow-hidden" style="height: 100vh">
      <main b-vtqmm3i4v1 role="main" class="pb-3 overflow-hidden h-100">
        <div id="Parent" class="h-100">
          <div id="header" class="row">
            <div class="row">
              <div class="col-1"></div>
              <div class="col-6">
                This is my header content
              </div>
              <div class="col">Some more header content</div>
            </div>
            <div class="row">
              <div class="col-1"></div>
              <div class="col-6">
                This is my header content
              </div>
              <div class="col">Some more header content</div>
            </div>
          </div>
          <div id="information" class="row">
            <div class="panel-title">
              <div class="col">
                Items
                <a role="button" data-bs-toggle="collapse" href="#itemsCollapse" style="font-size:25px">
                  <i>&#94;</i>
                </a>
              </div>
            </div>
            <div id="itemsCollapse" class="collapse show">
              <div class="application-subhead d-flex flex-row flex-nowrap">
                <div class="col-2">
                  <a href="#!" class="addItem">Add</a>
                </div>
                <div class="col itemList" id="itemList">
                  <div class="row">
                    <div...

CSS

table.table2 {
        table-layout: fixed;
        width: 100%;
        height: 25%;
        border: 1px solid;
        border-collapse: collapse;
        /* padding: 0px 0px 0px 0px; */
    }

  .table2 thead th {
        color: #ffffff;
        background-color: #000000; /*var(--color2);*/
        vertical-align: middle;
        position: sticky !important;
        top: 0 !important;
        z-index: 1 !important;
        }