如何消除encryptedRmd生成HTML文档的横向滚动并缩小边距

可以通过自定义CSS覆盖encrypted_html_document的默认样式，同时调整reactable的容器宽度来解决，以下是两种可行方案：

方案一：加密时注入自定义CSS #

1. 新建一个CSS文件（比如custom_style.css），添加以下样式：

/* 重置页面主体边距并隐藏横向滚动 */
body {
  margin: 1rem;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* 强制reactable表格自适应容器宽度 */
.reactable {
  width: 100% !important;
}

/* 调整标题容器的边距，避免超出页面 */
.reactable-title-container {
  width: 100%;
  padding: 0 0.5rem;
  box-sizing: border-box;
}

2. 在加密渲染时指定该CSS文件：

rmarkdown::render(
  "object.html",
  output_format = encryptedRmd::encrypted_html_document(
    css = "custom_style.css"
  )
)

方案二：保存reactable时提前注入样式 #

如果不想单独维护CSS文件，可以直接在保存reactable组件时添加自定义样式：

library(htmltools)
library(reactablefmtr)
library(htmlwidgets)

# 假设你已经生成了reactable_table_object
reactable_table_object <- reactablefmtr::add_title(reactable_table_object, title = "test")

# 添加自定义样式标签
custom_css <- tags$style(HTML("
  body {
    margin: 1rem;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  .reactable {
    width: 100% !important;
  }
  .reactable-title-container {
    width: 100%;
    padding: 0 0.5rem;
    box-sizing: border-box;
  }
"))

# 将样式插入到reactable组件头部
reactable_table_object <- htmlwidgets::prependContent(reactable_table_object, custom_css)

# 保存为HTML后加密
htmlwidgets::saveWidget(reactable_table_object, "object.html")
rmarkdown::render("object.html", output_format = encryptedRmd::encrypted_html_document())

原理说明 #

encryptedRmd的encrypted_html_document会生成一个新的HTML页面框架，自带的默认样式可能给body设置了过大的内边距，同时reactable默认未强制占满容器宽度，导致表格超出视口出现横向滚动。通过自定义CSS：

• 重置body的边距并禁用横向溢出
• 强制reactable表格宽度为100%，自适应容器
• 调整标题容器的盒模型，避免内容超出页面范围

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