如何让Quarto HTML文档占满浏览器窗口宽度

核心原因 #

你设置了page-layout: custom，Quarto默认的自定义布局会限制页面内容宽度，加上RPubs的容器样式，导致宽表格无法完整展示。

解决方案 #

1. 修改Quarto YAML配置，扩展页面宽度 #

直接将页面布局改为全屏，或自定义页面最大宽度：

---
title: "Test2"
author: "Philip Smith"
format: html
html: 
  page-layout: full  # 改为全屏布局，利用浏览器全部宽度
  code-fold: true
  link-external-icon: true
knitr:
  opts_chunk: 
    collapse: true
    comment: "#>" 
    R.options:
      knitr.graphics.auto_pdf: true
---

如果不想用全屏，也可以自定义内容宽度：

html:
  page-layout: custom
  content-width: 1200px  # 设置内容区最大宽度

2. 优化gt表格的响应式设置 #

将gt表格的固定宽度改为相对值，让表格自适应页面宽度，同时添加横向滚动（当表格过宽时）：

gt_tbl1 <- gt(data=FdfT)
gt_tbl1 <- gt_tbl1 %>% 
  tab_options(
    table.font.size=12,
    container.width = "100%",  # 改为相对宽度，适配父容器
    table.width = "100%"
  ) %>%
  # 其他原有设置保持不变...

3. 添加自定义CSS强制扩展容器宽度（可选） #

如果上述方法仍不生效，创建custom.css文件，添加以下样式：

/* 扩展RPubs和Quarto的内容容器宽度 */
.quarto-container {
  max-width: 95% !important;
  width: 95% !important;
}

/* 表格过宽时显示横向滚动 */
.gt_table {
  overflow-x: auto;
  display: block;
}

修改后的完整示例 #

---
title: "Test2"
author: "Philip Smith"
format: html
html: 
  page-layout: full
  code-fold: true
  link-external-icon: true
knitr:
  opts_chunk: 
    collapse: true
    comment: "#>" 
    R.options:
      knitr.graphics.auto_pdf: true
---

```{r set-options, echo=FALSE, warning=FALSE, cache=FALSE}
library(lubridate)
library(gt)
FdfT <- structure(list(Name = c("LFS participation rate", "LFS employment rate", 
"LFS unemployment rate", "Job vacancy rate", "LFS payroll", "LFS payroll employment", 
"LFS payroll average hours worked", "LFS payroll average hourly earnings", 
"SEPH payroll", "SEPH payroll employment", "SEPH payroll average hours worked", 
"SEPH payroll average hourly earnings", "LFS payroll", "LFS payroll employment", 
"LFS payroll average hours worked", "LFS payroll average hourly earnings", 
"SEPH payroll", "SEPH payroll employment", "SEPH payroll average hours worked", 
"SEPH payroll average hourly earnings"), V1 = c(65.4, 61.5, 6, 
5.6, 8.9, 5.8, 0.3, 2.7, 9.2, 6.8, -0.3, 2.3, 0.8, 0.3, 0.1, 
0.4, 1.3, 0.6, 0.6, 0.1), V2 = c(65, 60.8, 6.5, 5.4, 7.7, 5.8, 
-0.6, 2.3, 9.3, 7.8, -0.6, 2, -0.2, -1.5, 0.4, 0.9, 0.9, 0.1, 
0, 0.9), V3 = c(65.4, 61.8, 5.5, 5.3, 9.5, 6.3, 0, 3.1, 10.1, 
8, -0.6, 2.5, 1.9, 2.3, -0.3, -0.1, 0.8, 0.7, 0, 0), V4 = c(65.4, 
61.9, 5.3, 5.7, 9.1, 5.1, 0.3, 3.5, 11.8, 7.2, -0.6, 4.9, 0.7, 
0.3, 0.1, 0.3, 2.2, 0.8, -0.3, 1.7), V5 = c(65.3, 61.9, 5.2, 
5.7, 9.3, 6.3, -0.5, 3.3, 10.2, 7, -1.2, 4.3, -0.2, 0, -0.6, 
0.4, 0.2, 0.7, 0, -0.4), V6 = c(65.3, 61.9, 5.1, 5.7, 10.9, 7.2, 
-0.6, 3.9, 11.5, 8.6, -0.9, 3.5, 1.2, 0.2, 0.2, 0.8, -0.4, 0, 
-0.3, -0.3), V7 = c(64.9, 61.7, 4.9, 5.6, 11.3, 5.2, 0.6, 5.2, 
11.2, 7.8, -0.6, 3.9, 1.3, 0.1, 0.5, 0.7, 1, 0.8, 0, 0.4), V8 = c(64.7, 
61.6, 4.9, 5.5, 10.5, 4.2, 0.9, 5.2, 9, 5.9, -0.6, 3.3, 0, -0.4, 
-0.1, 0.4, 0.1, 0.1, 0, -0.1), V9 = c(64.8, 61.3, 5.4, 5.3, 9.4, 
3.5, 0.3, 5.4, 9.2, 5.5, 0, 3.6, 0.2, -0.1, -0.4, 0.6, 0.8, 0, 
0, 0.9), V10 = c(64.7, 61.3, 5.2, 5.2, 8.5, 2.6, 0.6, 5.2, 9.1, 
5.5, -0.6, 3.8, 0.5, 0.2, 0.3, 0, 0.8, 0.5, -0.3, 0.4), V11 = c(64.9, 
61.6, 5.2, 4.9, 8.8, 2.8, 0.3, 5.5, 7.9, 4.7, -1.2, 4.1, 1.1, 
0.5, -0.1, 0.7, -0.6, 0, -0.6, 0.1), V12 = c(64.8, 61.5, 5.1, 
NA, 8.3, 2, 0.5, 5.6, NA, NA, NA, NA, 0.7, 0, 0.3, 0.5, NA, NA, 
NA, NA), V13 = c(65, 61.8, 5, NA, 7.7, 2.1, 0.3, 5.2, NA, NA, 
NA, NA, 0.2, 0.4, -0.1, 0, NA, NA, NA, NA)), row.names = c(NA, 
-20L), class = "data.frame")

LASTdate <-"2022-12-01" 
NumMths <- 12
Dates <- seq.Date(as.Date("2021-12-01"),as.Date("2022-12-01"),by="month")
colls <- c("V1","V2","V3","V4","V5","V6","V7","V8","V9","V10","V11","V12","V13")
MyTitle <- paste0("**Labour market indicators<br>",format(Dates[1],"%B %Y"),
  " to ",format(Dates[13],"%B %Y"),"**")
gt_tbl1 <- gt(data=FdfT)
gt_tbl1 <- gt_tbl1 %>% 
  tab_options(table.font.size=12, container.width = "100%", table.width = "100%") %>%
  tab_header(
    title=md(html(MyTitle))
  ) %>% 
  cols_align(
    align=c("left"),
    columns=c(`Name`)
  ) %>%
  fmt_number(
    columns=all_of(colls),
    decimals=1,
    use_seps=TRUE
  ) %>%
  cols_label(
    `Name`="",
    `V1`=md("**Dec<br>2021**"),
    `V2`=md("**Jan<br>2022**"),
    `V3`=md("**Feb<br>2022**"),
    `V4`=md("**Mar<br>2022**"),
    `V5`=md("**Apr<br>2022**"),
    `V6`=md("**May<br>2022**"),
    `V7`=md("**Jun<br>2022**"),
    `V8`=md("**Jul<br>2022**"),
    `V9`=md("**Aug<br>2022**"),
   `V10`=md("**Sep<br>2022**"),
   `V11`=md("**Oct<br>2022**"),
   `V12`=md("**Nov<br>2022**"),
   `V13`=md("**Dec<br>2022**")
  ) %>%
  sub_missing(columns=everything(),rows=everything(),
    missing_text="---") %>%
  tab_style(
    style = list(
      cell_text(weight = "bold")
      ),
    locations = cells_title()
  ) %>%
  tab_style( # column label style
    style = list(
      cell_text(weight = "bold")
    ),
    locations = cells_column_labels(
      columns=c(Name,all_of(colls)))
  ) %>%
  tab_row_group(label="Ratio, per cent",
    rows=c(1:4),id="Levels") %>%
  tab_row_group(label="12-month percentage change, per cent",
    rows=c(5:12),id="PC12") %>%
  tab_row_group(label="1-month percentage change, per cent",
    rows=c(13:20),id="PC01") %>%
  opt_row_striping(row_striping = TRUE) %>%
  opt_vertical_padding(scale = 0.25) %>%
  tab_footnote(
      footnote = paste0("Dashes mean 'data not yet available'. Source for ",
      "data: Statistics Canada. @PhilSmith26.    Prepared: ",Sys.time()),
      locations = cells_title()
)
gt_tbl1

关键修改点 #

• YAML中page-layout: full：让页面内容占满浏览器宽度，消除左右空白
• gt表格设置container.width = "100%"和table.width = "100%"：表格自适应父容器宽度
• 可选CSS：强制覆盖RPubs的容器样式，确保宽度生效

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