Scrollbar Appears on kableExtra Tables with Download Button in Quarto — How to Remove?

I have an HTML document with many tables created with Quarto (in R). I created these with kableExtra (nicer visualisation than DataTables). With the help of a workaround I have now been able to insert a downloadbutten. Everything works perfectly. However, a scrollbar now always appears on the right, which is not really necessary. How can I get rid of it? The following method did not work. After rendering, there is always a scrollbar.

I would appreciate any suggestion. Thank you very much

t.grundgesamtheit <- data.frame(
  Konto = c("547866: <br>Zahlungen an e.A.", 
              "558925: <br>Zahlungen an SB e.A.", 
              "745656: <br>Restzahlungen"),
  Buchungsinhalt = c("Lorem Ipsum ABC", 
                     "Lorem Ipsum DEF", 
                     "Lorem Ipsum GHI")
)

f.tabellen_download(p.data = t.grundgesamtheit, 
                  p.titel = "Testtitel", 
                  p.file = "grundgesamtheit")


tabelle_html <- t.grundgesamtheit |>
      knitr::kable(col.names = c("Konto", "Buchungsinhalt"),
                   format = "html", 
                   escape = FALSE, 
                   align = c("l", "l", "l", "l"),
                   table.attr = "quarto-disable-processing=true") |> 
      kableExtra::kable_styling(bootstrap_options = c("striped", "hover", "condensed"), 
                                full_width = TRUE, 
                                position = "left",
                                fixed_thead = FALSE) |> 
      kableExtra::row_spec(0, extra_css = "vertical-align: top;") |> 
      kableExtra::column_spec(1, width = "1.5cm") 

css_style <- "
<style>
  div.kable-container {
    overflow-y: visible !important;
    max-height: none !important;
  }
  table {
    table-layout: auto !important;
  }
</style>
"
htmltools::tagList(
  htmltools::HTML(css_style),
  htmltools::HTML(tabelle_html),
  htmltools::HTML("<div style='font-size: 13px; text-align: left;'>@ Quelle</div><br>"),
  htmltools::HTML('<a href="downloads/grundgesamtheit.pdf" download style="padding:6px 12px; background:#c1c1c3; color:black; border-radius:4px; text-decoration:none;">Tabelle herunterladen</a>')
)

Solution

You can add div.cell-output-display { overflow-x: visible !important; } to your css_style. The other styles can be removed. I removed the call to f.tabellen_download since the function is not defined and is not important to your problem. I figured this out whilst playing around on the HTML page using devtools (press F12):

Full Quarto code

---
title: "Untitled"
format: html
editor: visual
---

## Quarto

```{r}
#| echo: false
t.grundgesamtheit <- data.frame(
  Konto = c("547866: <br>Zahlungen an e.A.", 
            "558925: <br>Zahlungen an SB e.A.", 
            "745656: <br>Restzahlungen"),
  Buchungsinhalt = c("Lorem Ipsum ABC", 
                     "Lorem Ipsum DEF", 
                     "Lorem Ipsum GHI")
)


tabelle_html <- t.grundgesamtheit |>
  knitr::kable(col.names = c("Konto", "Buchungsinhalt"),
               format = "html", 
               escape = FALSE, 
               align = c("l", "l", "l", "l"),
               table.attr = "quarto-disable-processing=true") |> 
  kableExtra::kable_styling(bootstrap_options = c("striped", "hover", "condensed"), 
                            full_width = TRUE, 
                            position = "left",
                            fixed_thead = FALSE) |> 
  kableExtra::row_spec(0, extra_css = "vertical-align: top;") |> 
  kableExtra::column_spec(1, width = "1.5cm") 

css_style <- "
<style>
  div.cell-output-display {
    overflow-x: visible !important;
  }
</style>
"
htmltools::tagList(
  htmltools::HTML(css_style),
  htmltools::HTML(tabelle_html),
  htmltools::HTML("<div style='font-size: 13px; text-align: left;'>@ Quelle</div><br>"),
  htmltools::HTML('<a href="downloads/grundgesamtheit.pdf" download style="padding:6px 12px; background:#c1c1c3; color:black; border-radius:4px; text-decoration:none;">Tabelle herunterladen</a>')
)
```