CSS help for rendering scrollable box output in Quarto/markdown with fixed header

Hi, Benjamin!

I have been attempting to modify my style.css file to include a sticky header within my scrollable table box. The scrollable box renders as hoped for, however, the table header scrolls out of view. Can you point me in the direction of what to alter to allow the header to be fixed (i.e.- always seen when scrolling)?

My style.css file contains:

.Rtable1 th {
  background-color: #D3D3D3;
  color: black;
  position: sticky;
  top: 0;
}

Within the Quarto doc:

title: "Penguin test"
date: "`r Sys.Date()`"

format: 
  html:
    self-contained: true
    css: style.css

knitr:
  opts_chunk: 
    echo: false  
    message: false 
---

<div style="height:150px; width: 500; overflow:auto; border:1.5px solid gray; padding:1.5%">
``` {r}
library(palmerpenguins)
library(table1)

penguins |>
  table1(
    ~ bill_length_mm + bill_depth_mm +
      flipper_length_mm + body_mass_g |
      sex,
    data = _
  )

benjaminrich / table1

CSS help for rendering scrollable box output in Quarto/markdown with fixed header #91