如何为R语言gt表格设置固定表头与表格内垂直滚动条并解决列对齐问题

问题根源 #

你的代码存在两个核心问题导致列错位：

1. 将thead tr和tbody都设为display: block，破坏了表格原生的列宽对齐机制，手动设置width:100vw会强制拉伸列宽。
2. 表头未预留滚动条占用的宽度空间，导致表头和表体宽度不一致。

最简修正方案 #

以下是修复后的代码，同时保留固定表头和表格自身垂直滚动的功能：

library(tibble)
library(gt)

tibble(mtcars) %>% 
  gt(id = "fixed-header-table") %>%
  tab_options(
    data_row.padding = px(3),
    column_labels.background.color = "blue"
  ) %>%
  opt_css(
    css = "
    #fixed-header-table {
      table-layout: fixed;
      border-collapse: collapse;
      width: 100%; /* 适配父容器宽度，避免超出视口 */
    }

    #fixed-header-table tbody {
      display: block;
      max-height: 500px; /* 设置表体最大高度，超出后显示滚动条 */
      overflow-y: auto;
    }

    #fixed-header-table thead tr {
      display: table; /* 保留表头的表格布局，维持列宽对齐 */
      width: calc(100% - 17px); /* 减去滚动条默认宽度，预留空间 */
    }

    #fixed-header-table th, #fixed-header-table td {
      padding: 5px;
      width: auto; /* 让fixed布局自动分配列宽，也可手动设置固定宽度 */
    }
    "
  )

关键修改说明 #

• 表格宽度：用width:100%替代100vw，让表格自适应父容器，避免横向溢出。
• 表头布局：thead tr使用display: table而非block，保留表格原生的列宽对齐逻辑。
• 滚动条空间预留：通过calc(100% - 17px)给表头减去滚动条的默认宽度（多数桌面浏览器为17px），确保表头和表体宽度匹配。
• 列宽控制：移除th/td的强制宽度，让table-layout: fixed自动分配列宽；如果需要固定列宽，可给每个列设置具体宽度（比如width: 100px）。

补充提示 #

如果需要适配不同浏览器的滚动条宽度差异，可通过JavaScript动态计算滚动条宽度并设置到表头，但上述CSS方案已能覆盖绝大多数常规场景，满足最简需求。

内容的提问来源于stack exchange，提问作者yben