gt opt_css messes up subsequent tables

General
,
1

I want a scrollable table with fixed header. It looks like that's possible using opt_css. I used gt() argument id="scroll" to prevent the css from being applied to the subsequent table, but the subsequent table's column labels are misplaced--shoved all the way to the right.

Here's the .qmd and the rendered document. The yaml is format: html.

#| echo: FALSE
library(gt)
# Make some data.
dat1 <- data.frame(A=sample(15), B=sample(15), C=sample(15))
dat2 <- data.frame(D=sample(5), E=sample(5))

#| echo: false
gt(dat1, id = "scroll") |> 
  opt_css(css="
      #scroll tbody {
        display: block;
        overflow-y: scroll;
        max-height: 250px;
      }
      #scroll thead, tbody tr {
        display: table;
        width: calc(50% - 20px);
        table-layout: fixed;
    }
      "
  )

#| echo: false
gt(dat2)

Screenshot 2026-02-24 103525
Screenshot 2026-02-24 103525403×590 3 KB

2

The problem is a missing #scroll in the css code. Here's the corrected code chunk for the first table:

#| echo: false
gt(dat1, id = "scroll") |> 
  opt_css(css="
      #scroll tbody {
        display: block;
        overflow-y: scroll;
        max-height: 250px;
      }
      #scroll thead, #scroll tbody tr {
        display: table;
        width: calc(50% - 20px);
        table-layout: fixed;
    }
      "
  )

Thank you to stefan on Stack Overflow.