如何在RevealJS Quarto中对齐r-stack布局的表格？

在RevealJS的.r-stack布局中，以fragment形式展示两个Kable表格时，第二个表格为Sepal.Width列单元格添加背景色后，叠加时与第一个表格无法对齐，出现列重复显示的问题。

可复现代码 #

---
title: "Align r-stack tables in revealjs"
format: revealjs
---

## Slide

```{r}
library(knitr)
library(kableExtra)

::: {.r-stack}

::: {.fragment}

kbl(head(iris), booktabs = TRUE, escape = FALSE) |>
  kable_styling(font_size = 15)

:::

::: {.fragment}

iris = head(iris)
iris$Sepal.Width = cell_spec(head(iris$Sepal.Width), background = ifelse(head(iris$Sepal.Width) == 3.2, "red", "white"), align = 'initial')
head(iris) |>
  kbl(booktabs = TRUE, escape = FALSE) |>
  kable_styling(font_size = 15) 

:::

:::

### 效果截图
![表格未对齐效果](https://i.sstatic.net/7ZWAT.png)

---

# 解决方法

问题根源是`cell_spec`会给单元格包裹额外的`<span>`标签，导致浏览器计算列宽时产生微小偏差，叠加时出现错位。以下两种方法可以修复：

## 方法1：固定所有列宽度
给两个表格设置完全一致的列宽，强制布局对齐：

```yaml
---
title: "Align r-stack tables in revealjs"
format: revealjs
---

## Slide

```{r}
library(knitr)
library(kableExtra)

::: {.r-stack}

::: {.fragment}

kbl(head(iris), booktabs = TRUE, escape = FALSE) |>
  kable_styling(font_size = 15) |>
  column_spec(1:5, width = "20%") # 统一设置每列宽度为20%

:::

::: {.fragment}

iris_sub = head(iris)
iris_sub$Sepal.Width = cell_spec(iris_sub$Sepal.Width, 
                                 background = ifelse(iris_sub$Sepal.Width == 3.2, "red", "white"),
                                 align = 'initial')
kbl(iris_sub, booktabs = TRUE, escape = FALSE) |>
  kable_styling(font_size = 15) |>
  column_spec(1:5, width = "20%") # 保持与第一个表格相同的列宽配置

:::

:::

## 方法2：用row_spec结合CSS指定列背景
如果仅需给特定行的目标列加背景，可使用`row_spec`配合CSS选择器，避免添加额外标签影响列宽：

```yaml
---
title: "Align r-stack tables in revealjs"
format: revealjs
---

## Slide

```{r}
library(knitr)
library(kableExtra)

::: {.r-stack}

::: {.fragment}

kbl(head(iris), booktabs = TRUE, escape = FALSE) |>
  kable_styling(font_size = 15)

:::

::: {.fragment}

kbl(head(iris), booktabs = TRUE, escape = FALSE) |>
  kable_styling(font_size = 15) |>
  row_spec(which(head(iris)$Sepal.Width == 3.2), 
           extra_css = "td:nth-child(2) { background-color: red; }") # 仅给第二列（Sepal.Width）的目标行设置背景

:::

:::

---

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