KE_grid-table-sticky

by sthag

HTML

<div class="table">
  <div class="head">
    <div class="row">
      <div class="cell">Kopf</div>
      <div class="cell">Kopf</div>
      <div class="cell">Kopf</div>
    </div>
    <div class="row">
      <div class="cell cell-span-2">Kopf</div>
      <div class="cell">Kopf</div>
    </div>
  </div>
  <div class="body">
    <div class="row">
      <div class="cell">Zelle</div>
      <div class="cell">Zelle</div>
      <div class="cell">Zelle</div>
    </div>
    <div class="row">
      <div class="cell">Zelle</div>
      <div class="cell cell-span-2">Große Zelle</div>
    </div>
    <div class="row">
      <div class="cell">Zelle mit mehr Inhalt</div>
      <div class="cell">Zelle</div>
      <div class="cell">Z...</div>
    </div>
    <div class="row">
      <div class="cell cell-span-3">Riesige Zelle</div>
    </div>
    <div class="row">
      <div class="cell cell-span-3 cell-wrap">
        <div class="table">
          <div class="head">
            <div class="row">
              <div class="cell">Verschachtelter Kopf</div>
              <div class="cell">Verschachtelter Kopf</div>
              <div class="cell">Verschachtelter Kopf</div>
            </div>
          </div>
          <div class="body">
            <div class="row">
              <div class="cell">Verschachtelte Zelle</div>
              <div class="cell cell-span-2">Verschachtelte große Zelle</div>
            </div>
            <div class="row">
              <div class="cell">Verschachtelte Zelle mit mehr Inhalt</div>
              <div class="cell">Verschachtelte Zelle</div>
              <div class="cell">Verschachtelte Zelle</div>
            </div>
            <div class="row">
              <div class="cell cell-span-3">Verschachtelte riesige Zelle</div>
            </div>
          </div>
          <div class="foot">
            <span class="cell-span-3">Verschachtelter Fuß</span>
          </div>
        </div>
     ...

SCSS

$max-columns: 3;

@mixin cell-span($number) {
  .cell-span-#{$number} {
    grid-column: span #{$number};
  }
}

@for $i from 1 through $max-columns {
  @include cell-span(#{$i});
}

html,
body {
  margin: 0;
  height: 100%;
}

.table {
  position: relative;
  display: grid;
  gap: 2px;
  // grid-template-columns: repeat(3, 1fr);
  grid-template-columns: auto 1fr min-content;
  background-color: black;

  &>* {
    display: contents;
  }
}

.row {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
}

.cell {
  padding-inline: 4px;
  background-color: rgba(255, 255, 255, .5);
}

.table .table,
.cell-wrap {
  display: contents;
}

.table .table .row {
  border-bottom: 2px solid transparent;
}

.cell-wrap {
  padding: 0 !important;
}

.head {
  .row {
    position: sticky;
    top: 0;
    left: 0;
    background-color: crimson;
  }

  .cell {
    padding-block: 16px;
  }
}

.body>.row>.cell {
  padding-block: 48px;
}

.foot>* {
  padding: 16px 4px;
  background-color: yellowgreen;
}