在R Markdown中用HTML实现带间距并排边框表格的问题

问题原因 #

你复制的W3Schools代码在R Markdown里失效，核心是R Markdown的默认HTML模板自带全局CSS样式，会干扰表格的布局和边框渲染——比如默认表格可能被设为display: block或带有额外margin，导致flex布局无法生效。

方法一：修改HTML代码适配R Markdown环境 #

直接调整HTML结构，给容器添加明确的flex布局规则，同时强制表格的边框样式：

<style>
  .table-container {
    display: flex;
    gap: 30px; /* 控制两个表格的间距 */
    align-items: flex-start;
  }
  .side-table {
    border-collapse: collapse;
    border: 1px solid black;
  }
  .side-table th, .side-table td {
    border: 1px solid black;
    padding: 8px;
  }
</style>

<div class="table-container">
  <table class="side-table">
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </tr>
    <tr>
      <td>Cell 3</td>
      <td>Cell 4</td>
    </tr>
  </table>

  <table class="side-table">
    <tr>
      <th>Header A</th>
      <th>Header B</th>
    </tr>
    <tr>
      <td>Cell A</td>
      <td>Cell B</td>
    </tr>
    <tr>
      <td>Cell C</td>
      <td>Cell D</td>
    </tr>
  </table>
</div>

这里通过自定义CSS强制flex容器的布局，同时给表格和单元格明确设置边框，避免R Markdown默认样式的干扰。如果需要保留border="1"属性，也可以把表格标签改成<table class="side-table" border="1">，效果一致。

方法二：用R包生成并排表格（更贴合R Markdown工作流） #

如果不想写纯HTML，推荐用kableExtra包实现，代码更简洁且适配R Markdown：

library(knitr)
library(kableExtra)

# 生成两个示例表格
table1 <- data.frame(Header1 = c("Cell1", "Cell3"), Header2 = c("Cell2", "Cell4"))
table2 <- data.frame(HeaderA = c("CellA", "CellC"), HeaderB = c("CellB", "CellD"))

# 用fluid_row实现并排
fluid_row(
  column(6, 
         kable(table1, "html", border = 1) %>% 
           kable_styling(full_width = FALSE)
  ),
  column(6, 
         kable(table2, "html", border = 1) %>% 
           kable_styling(full_width = FALSE)
  )
)

这个方法不需要手动写CSS，通过kable设置border=1满足你的边框需求，fluid_row和column控制两个表格的宽度和并排布局，间距可以通过调整column的宽度或者添加自定义margin实现。

方法三：全局自定义CSS（一次性解决所有表格样式问题） #

如果经常需要这类表格，可以在R Markdown文档开头添加全局CSS，覆盖默认样式：

<style>
  .side-by-side {
    display: flex;
    gap: 20px;
    margin: 1em 0;
  }
  .side-by-side table {
    border-collapse: collapse;
    border: 1px solid #000;
    margin: 0; /* 去掉R Markdown默认的表格margin */
  }
  .side-by-side table th, .side-by-side table td {
    border: 1px solid #000;
    padding: 0.5em;
  }
</style>

之后只要把需要并排的表格放在div class="side-by-side"里即可，无需重复写样式。

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