Align r-stack layout tables in revealjs Quarto

Question

I would like to fragment two Kable tables in a .r-stack layout. The problem is that when the second table got a colored value, the table doesn't align well anymore after overlaying so it shows the column twice. Here is some reproducible code:

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

## Slide

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

::: {.r-stack}

::: {.fragment}
```{r}
kbl(head(iris), booktabs = TRUE, escape = FALSE) |>
  kable_styling(font_size = 15)
```

:::

::: {.fragment}
```{r}
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) 
```

:::

:::

Output:

As you can see the second table with the colored value of the Sepal.Width doesn't get stacked on the first table. So I was wondering if anyone knows how to align well two tables with r-stack layout in revealjs Quarto?

Answer 1

The issue is that after applying the cell_spec the column is no longer a numeric column and hence gets aligned to the left by default. Hence, first step would be to align the column to the right. However, even after doing so there is a small discrepancy as adding the background adds some padding and moreover, zeros after the decimal point get dropped. Not an expert in kableExtra but one fix for these issues would be to use a cell_spec in the first table too (but note that there is still some padding on the right for the second column):

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

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

## Slide

::: {.r-stack}

::: {.fragment}
```{r}
iris2 <- head(iris)
iris2$Sepal.Width <- cell_spec(iris2$Sepal.Width, background = "white")
iris2 |> 
  kbl(booktabs = TRUE, escape = FALSE, align = "rrrrl") |>
  kable_styling(font_size = 15)
```

:::

::: {.fragment}
```{r}
iris2 <- head(iris)
iris2$Sepal.Width <- cell_spec(iris2$Sepal.Width, background = ifelse(iris2$Sepal.Width == 3.2, "red", "white"))
iris2 |>
  kbl(booktabs = TRUE, escape = FALSE, align = "rrrrl") |>
  kable_styling(font_size = 15)
```

:::

:::