Bases: Don't unload table row when scroll pass the screen

Custom CSS & Theme Design
4

Hi, you can apply a striped background directly to the container using a repeating gradient that matches the row height (defined by --bases-table-row-height).

.bases-tbody {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 var(--bases-table-row-height),
    var(--table-row-alt-background) 0 calc(var(--bases-table-row-height) * 2)
  );
}

Since each row has a stable top value, its position remains fixed, so the striping will stay consistent even when rows are unloaded.

3 Likes