DT datatable transparent background in Rmarkdown html reports

Question

I need a watermark on my html output Rmarkdown but it is masked by the datatables.

There might be a simple answer but i don't know Javascript yet. Any tip?

I have tried using formatStyle but it doesn't work as expected:

datatable(mytable, escape = F, class = 'row-border hover compact') %>% 
  formatStyle(columns = names(mytable), backgroundColor = "#FFFFFF00")

I get my watermark with style.css:

.watermark {
  opacity: 0.2;
  position: fixed;
  top: 50%;
  left: 50%;
  font-size: 600%;
  color: #00407d;
}

and full Rmarkdown example:

---
title: "Untitled"
output:
  html_document: 
    highlight: pygments
    theme: "flatly"      # for: html_document black theme: darkly, white them: flatly
    toc: TRUE
    toc_float: TRUE       # for: html_document
    css: test-styles.css
---

<div class="watermark">DRAFT</div>

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
library(DT)
```

## Tables

```{r iris}

DT::datatable(iris, class = '') %>%
  DT::formatStyle(columns = "Species", backgroundColor = "#00000000") %>%
  DT::formatStyle(columns = "Petal.Width", backgroundColor = "#FFFFFFFFF")

DT::datatable(iris, class = '', options = list(
  initComplete = JS("
    function(settings, json) {
      $(this.api().table().body()).css({
        'background-color': 'rgba(255,0,0,0.2)',
        'color': 'rgba(0,255,0,0.8)'
      });
    }")))

```

## Including Plots

You can also embed plots, for example:

```{r pressure, echo=FALSE}
plot(pressure)
```

Answer 1

Add a large z-index to your watermark class:

.watermark {
  opacity: 0.2;
  position: fixed;
  top: 50%;
  left: 50%;
  font-size: 600%;
  color: #00407d;
  z-index: 1000000;
}

Then just do datatable(iris), no need to set a background color.