RMD输出HTML转PDF时CSS表格单元格颜色重叠及横向输出问题

1 修复表格单元格颜色重叠 #

问题根源：原有自定义CSS同时给table、td设置了width:100%导致单元格宽度计算溢出，缺少打印场景下的表格渲染适配规则，触发背景色重叠。

替换你原有自定义CSS块的全部内容为以下代码：

@media screen {
body{ /* Normal  */
      font-size: 15px;
      font-family: "Arial", Helvetica, sans-serif;
  }
table {  /* 仅给table设置宽度和布局规则，移除td上的错误宽度配置 */
  font-size: 13px;
  font-family: "Arial", Helvetica, sans-serif;
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse; /* 合并边框避免重复渲染 */
}
td, th {
  padding: 6px 8px; /* 统一单元格内边距 */
  border: 1px solid #ddd; /* 显式设置边框避免重叠 */
}
h1.title {
  font-size: 38px;
  color: #0070c0;
  top: 25px;
  font-family: "Arial", Helvetica, sans-serif;
}
h1 { /* Header 1 */
  font-size: 28px;
  color: #558ee7;
  font-family: "Arial", Helvetica, sans-serif;
}
h2 { /* Header 2 */
  font-size: 22px;
  color: #0070c0;
  font-family: "Arial", Helvetica, sans-serif;
}
h3 { /* Header 3 */
  font-size: 18px;
  color: #0070c0;
  font-family: "Arial", Helvetica, sans-serif;
}
h4 { /* Quality Statement */
  font-size: 28px;
  color: #558ee7;
  font-family: "Arial", Helvetica, sans-serif;
}
h5 { /* subtitle */
  font-size: 13px;
  color: #0070c0;
  font-family: "Arial", Helvetica, sans-serif;
}
.main-container {
  max-width: 100% !important;
}
}
@media print {
@page {
  size: A4 landscape; /* 直接设置A4横向布局 */
  margin: 1.5cm; /* 可自定义页边距 */
}
body{
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact; /* 兼容非webkit内核渲染工具 */
}
table {
  border-collapse: collapse;
  width: 100%;
}
td, th {
  padding: 6px 8px;
  border: 1px solid #ddd;
  background-clip: padding-box; /* 避免背景色溢出到边框区域 */
}
}

修改点说明：

• 移除了td元素上的错误width: 100%配置，仅保留table的全局宽度规则
• 新增border-collapse: collapse合并单元格边框，避免边框重复渲染触发颜色重叠
• 显式设置单元格内边距和边框规则，统一不同渲染环境下的表格样式
• 新增background-clip: padding-box规则，禁止单元格背景色溢出到边框区域

2 PDF横向布局实现 #

上述CSS中已经通过@page规则内置了A4横向布局配置，根据你使用的转换工具，额外适配规则如下：

• 如果使用pagedown::chrome_print()转换PDF：修改CSS后直接转换即可生效
• 如果使用wkhtmltopdf转换：可以在转换命令中新增参数--orientation Landscape，或者在RMD的YAML头部添加配置：

---
title: "Title of File"
subtitle: "Test Output"
output:
  html_document:
    css: your_custom.css
  wkhtmltopdf::html_pdf:
    orientation: landscape
---

• 如果直接用浏览器打印导出PDF：在打印设置中手动选择「横向」布局即可生效

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