R Markdown中reactable表格响应式双列布局实现方法

优先使用CSS Flex布局实现需求，比HTML表格方案适配性更强，不会出现移动端内容溢出、列宽挤压变形的问题，操作步骤如下：

• 第一步：添加响应式布局样式
  可以直接把CSS代码写在Rmd文档内，不需要额外修改header.html文件，断点采用通用的移动端适配阈值768px：

/* 双表格外层容器 */
.two-table-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 2%; /* 两个表格的横向间距 */
  margin: 1rem 0;
}
/* 大屏下单表格容器样式：两列并排 */
.table-card {
  width: 49%; /* 两列宽度+间距刚好撑满容器 */
}
/* 屏幕宽度小于768px（移动端）时切换为上下堆叠 */
@media (max-width: 767px) {
  .table-card {
    width: 100%;
    margin-bottom: 1.5rem;
  }
}
/* 强制reactable自适应父容器宽度，避免溢出 */
.reactable {
  width: 100% !important;
}

• 第二步：修改R代码块，给表格套上响应式容器
  不需要修改你预先保存的T1/T2对象，直接用htmltools的div标签包裹即可，修改后的完整Rmd代码如下：

---
title: "Table Test"
description: "Responsive design with two reactable tables."
categories: []
tags: []
output:
  html_document:
    includes: header.html
---

<h1>My Tables</h1>

```{css, echo=FALSE}
.two-table-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 2%;
  margin: 1rem 0;
}
.table-card {
  width: 49%;
}
@media (max-width: 767px) {
  .table-card {
    width: 100%;
    margin-bottom: 1.5rem;
  }
}
.reactable {
  width: 100% !important;
}

library("qs")
library("reactable")
library("htmltools")

T1 <- qread("/data/T1.qs")
T2 <- qread("/data/T2.qs")

# 为两个表格套上响应式布局容器
div(
  class = "two-table-wrap",
  div(class = "table-card", T1),
  div(class = "table-card", T2)
)

如果你坚持要用HTML表格实现，只需要把上述flex容器替换为1行2列的table标签，给table添加width:100%; border-collapse: collapse;样式，再通过媒体查询让移动端的td标签变为display: block; width: 100%即可。但这种方案在部分老旧移动浏览器上容易出现列宽计算错误，优先推荐flex方案。

• 参数调整说明
  • 如果需要适配你网站的断点规则，直接修改CSS中max-width的数值即可
  • 两个表格的间距可以通过修改.two-table-wrap的gap值调整，同步修改.table-card的宽度保证总宽度不超过100%即可
  • 如果渲染后两个表格高度差较大，可以给.table-card添加display: flex; align-items: flex-start;属性避免出现多余空白

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