Nested Grid Table with Sticky Header

by sthag

HTML

<div class="table-wrapper">
  <table class="main-table">
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td colspan="3">
          <table class="nested-table">
            <thead>
              <tr>
                <th>Nested Header 1</th>
                <th>Nested Header 2</th>
                <th>Nested Header 3</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Nested Content 1</td>
                <td>Nested Content 2</td>
                <td>Nested Content 3</td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</div>

SCSS

.table-wrapper {
            max-height: 500px;
            overflow: auto;
        }

        .main-table {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            width: 100%;
        }

        .main-table > thead,
        .main-table > tbody {
            display: contents;
        }

        .main-table thead tr {
            display: grid;
            grid-template-columns: subgrid;
            grid-column: 1 / -1;
            position: sticky;
            top: 0;
            background-color: white;
            z-index: 10;
        }

        .main-table tbody tr {
            display: grid;
            grid-template-columns: subgrid;
            grid-column: 1 / -1;
        }

        .main-table th,
        .main-table td {
            border: 1px solid #ddd;
            padding: 8px;
        }

        /* Nested table styles */
        .nested-table {
            display: grid;
            grid-template-columns: subgrid;
            grid-column: 1 / -1;
            width: 100%;
        }

        .nested-table > thead,
        .nested-table > tbody {
            display: contents;
        }

        .nested-table thead tr,
        .nested-table tbody tr {
            display: grid;
            grid-template-columns: subgrid;
            grid-column: 1 / -1;
        }

        .nested-table th,
        .nested-table td {
            border: 1px solid #ddd;
            padding: 8px;
        }