Search code examples
htmlcssrshinykableextra

Hovering color of rows in R kable table HTML

I am producing a html report inside R shiny app using the rmarkdown::render function. I would like to change the hovering color of the rows of the table. I've seen this post, but it doesn't work for me.

With tr:hover {background-color: coral;} only the first row (header) takes the hovering color that I want. What is weird, is that the td:hover {background-color: coral;} works (the hovering color of each cell), but it is not exactly what I would like.

Any idea what I am doing wrong ?

Thanks for the help

---
title: "Demand"
author:
  - name: myname
date: "`r format(Sys.time(), '%d/%m/%y')`"
output: 
 html_document
params:
  inputdata: NULL
---

<style>
td:hover {background-color: coral;}
tr:hover {background-color: coral;}
</style>


`r params$inputdata %>%  kbl() %>%  kable_material(c("striped", "hover")) `
Solution

  • The kable_material style is overriding the css selectors. You can use !important to make your hovers take precedence:

    ---
title: "kable_test"
output: html_document
---

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

<style>
tr:hover {background-color: coral !important;}
</style>

`r head(mtcars) %>%  kbl() %>%  kable_material(c("striped")) `

    The "hover" option isn't then needed.