rmdformat: change default table scroll box

Context

The rmdformats package provides a few cool default theme for Rmds. I'm using the downcute theme.

Reproducible example

However, when I plot a table in my html document, the theme automatically sets a few defaults that I can't figure out how to edit.

---
title: "Test"
output: rmdformats::downcute
---  

```{r, echo=FALSE, warning=FALSE, message=FALSE}
library(dplyr)
library(kableExtra)

mtcars %>% 
  bind_cols(mtcars) %>% 
  kbl() %>% 
  scroll_box(width = "100%", height = "400px")
```

Here is how it looks like (SCROLL TO THE BOTTOM TO SEE THE SECOND HORIZONTAL SCROLLBAR):

Issues

There are two issues with this output:

The scroll_box function adds a new layer of scroll bars instead of replacing the existing one which is automatically set up by the package. Thus, you end up with two horizontal scroll bar (the second one seems to be off)
The labels of the columns are not fixed on top.

Expected Result

I would like to get the following output. To create the expected result I switched to the html_document theme, but I would like to use the rmdformats theme!

---
title: "Test"
output: html_document
---

```{r, echo=FALSE, warning=FALSE, message=FALSE}
library(dplyr)
library(kableExtra)

mtcars %>% 
  bind_cols(mtcars) %>% 
  kbl() %>% 
  kable_styling() %>% 
  scroll_box(width = "100%", height = "400px")
```

Any help? Maybe a CSS solution?

Extra info

> sessionInfo()
R version 4.1.3 (2022-03-10)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows 10 x64 (build 19044)

Matrix products: default

locale:
[1] LC_COLLATE=Italian_Italy.1252  LC_CTYPE=Italian_Italy.1252    LC_MONETARY=Italian_Italy.1252 LC_NUMERIC=C                  
[5] LC_TIME=Italian_Italy.1252    

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
[1] kableExtra_1.3.4 dplyr_1.0.9     

loaded via a namespace (and not attached):
 [1] bslib_0.3.1       jquerylib_0.1.4   highr_0.9         pillar_1.7.0      compiler_4.1.3    rmdformats_1.0.4  tools_4.1.3      
 [8] digest_0.6.29     jsonlite_1.8.0    viridisLite_0.4.0 evaluate_0.15     lifecycle_1.0.1   tibble_3.1.6      pkgconfig_2.0.3  
[15] rlang_1.0.2       DBI_1.1.2         cli_3.3.0         rstudioapi_0.13   yaml_2.3.5        xfun_0.30         fastmap_1.1.0    
[22] httr_1.4.3        stringr_1.4.0     knitr_1.39        xml2_1.3.3        sass_0.4.1        systemfonts_1.0.4 generics_0.1.2   
[29] vctrs_0.4.1       webshot_0.5.3     tidyselect_1.1.2  svglite_2.1.0     glue_1.6.2        R6_2.5.1          fansi_1.0.3      
[36] rmarkdown_2.14    bookdown_0.26     purrr_0.3.4       magrittr_2.0.3    scales_1.2.0      ellipsis_0.3.2    htmltools_0.5.2  
[43] assertthat_0.2.1  rvest_1.0.2       colorspace_2.0-3  utf8_1.2.2        stringi_1.7.6     munsell_0.5.0     crayon_1.5.1

Solution

You have to control the table and the table wrapper elements. Let me know if this isn't what you were looking for.

---
title: "Test"
output: rmdformats::downcute
---  

<style>
table, .table-wrapper {
  height: 400px;
  width: 100%;
  overflow: auto;
}
</style>

```{r, echo=FALSE, warning=FALSE, message=FALSE}
library(dplyr)
library(kableExtra)

mtcars %>% 
  bind_cols(mtcars) %>% 
  kbl() #%>% 
 # scroll_box(width = "100%", height = "400px")
```

I don't know how you planned to use the other space, but this template has obnoxious margins. If you wanted to maximize the use of space, then update the content between the <style> tags to the following content:

<style>
table, .table-wrapper {
  height: 400px;
  width: 100%;
  overflow: auto;
}
.layout-narrow .Wrap {
  margin: unset;
  max-width: unset;
}
</style>

Notice that there is no horizontal scrollbar now because the entire width of the table is showing.

Update: Adding a sticky header row

To make the top row stick, change the content in the <styles> tags to the following. (You can still add the .layout-narrow .Wrap styles to this, as well.)

Note that it's not table, .table-wrapper. table is no longer in these tags.

<style> 
.table-wrapper {
  overflow: auto;
  height: 400px;
  width: 100%;
}
thead, th {
  top: 0;
  position: sticky;
  z-index: 2;
}
</style>