如何在R Notebook中让knitr::kable表格并排且居中显示？

我来帮你搞定这个需求！你之前用float_left实现了表格并排，但没法让整体居中，核心问题是浮动元素本身默认左对齐，得给它们套一个能控制居中的容器。下面给你两种可行的方案，都能实现表格并排+整体居中的效果，完美适配HTML输出：

方案1：用inline-block实现灵活居中并排 #

这种方法通过HTML的div容器手动控制布局，适合自定义间距和样式：

library(htmltools)
library(knitr)
library(kableExtra)
library(data.table)

# 替换成你的表格标题
caption_tot <- "总数据概览"
caption_week <- "周度数据概览"

# 生成表格对象（注意：full_width必须设为FALSE！）
table_tot <- knitr::kable(dt_tot, "html", caption = caption_tot) %>%
  kableExtra::kable_styling(bootstrap_options = c("hover"), full_width = FALSE) %>%
  kableExtra::column_spec(1:ncol(dt_tot), width = "120px") # 可选：统一列宽避免表格错位

table_week <- knitr::kable(dt_tot_week, "html", caption = caption_week) %>%
  kableExtra::kable_styling(bootstrap_options = c("hover"), full_width = FALSE) %>%
  kableExtra::column_spec(1:ncol(dt_tot_week), width = "120px")

# 用div包裹实现居中并排
tags$div(
  style = "text-align: center; margin: 20px 0;", # 外层div设置整体居中，上下留空白
  tags$div(style = "display: inline-block; margin: 0 15px;", table_tot), # 表格设为行内块，左右留空隙
  tags$div(style = "display: inline-block; margin: 0 15px;", table_week)
)

关键细节： #

• full_width = FALSE是核心：如果设为TRUE，表格会占满整个父容器宽度，根本没法并排
• display: inline-block让两个表格在同一行显示，同时保留块级元素的特性（比如可以设置内边距）
• 外层的text-align: center直接让两个表格整体居中，内层的margin用来控制表格之间的空隙，避免挤在一起

方案2：用Bootstrap栅格系统实现响应式居中 #

如果你希望在小屏幕（比如手机）上表格自动换行，推荐用Bootstrap的栅格布局，兼容性更好：

library(htmltools)
library(knitr)
library(kableExtra)
library(data.table)

# 生成表格对象（同样要设置full_width=FALSE）
table_tot <- knitr::kable(dt_tot, "html", caption = "总数据概览") %>%
  kableExtra::kable_styling(bootstrap_options = c("hover"), full_width = FALSE)

table_week <- knitr::kable(dt_tot_week, "html", caption = "周度数据概览") %>%
  kableExtra::kable_styling(bootstrap_options = c("hover"), full_width = FALSE)

# 用Bootstrap的row和col实现居中并排
tags$div(
  class = "row justify-content-center", # 行设置内容水平居中
  tags$div(class = "col-lg-5 col-md-6", table_tot), # 大屏幕占5列，中屏幕占6列
  tags$div(class = "col-lg-5 col-md-6", table_week)
)

关键细节： #

• justify-content-center让栅格列在水平方向自动居中
• col-lg-5表示在大屏幕（≥992px）上每个表格占5个栅格列（Bootstrap总共有12列，5+5=10，剩下2列自动分配为左右边距）
• 在中屏幕（≥768px）上每个表格占6列，刚好填满一行；小屏幕上会自动换行，避免表格挤在一起变形

两种方案都能完美解决你的问题，选哪种看你是否需要响应式布局～

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