Search code examples
htmlcssrkablekableextra

Full Cell in background color in html Rmarkdown table in R

I have a data frame called df that I want to print it in html format of Rmarkdown file. Globally I have set :

options(knitr.table.format = "html")

in R setup chunk.

Below I wrote some code to conditional format the cells of the table. But the color background is only in the text not in the full cell.

df <- data.frame(
  Name = c("John", "Helen", "George"),
  Pizza = c(5, 4, 3.4),
  Pasta = c(3.9,4.2, 4.2),
  Sweet = c(4, 3, 5)
)




set_background  = function(x, color = "white") {
  kableExtra::cell_spec(x,
                        bold = TRUE,
                        align = "center",
                        color = "white", 
                        background = color,
                        extra_css ="background-color;display: block;text-align: center;padding: 0px;")}

set_background2  = function(x, color = "black") {
  kableExtra::cell_spec(x,
                        bold = TRUE,
                        color="black", 
                        background = color,
                        extra_css ="background-color;display: block;text-align: center;padding: 0px;")
}



df %>%
  mutate( across(Name, \(x) case_when(Name == "Helen" ~set_background2(x, "yellow") ,
                                              Name == "John" ~set_background2(x, "yellow"),
                                              TRUE ~ Name)))%>%
  mutate( 
    across(Pizza:Sweet, \(x)
           case_when(
             x > 3  & x <= 3.5  ~ set_background(x, "blue"),
             x > 3.5  & x <= 4.5  ~ set_background(x, "lightgreen"),
             x > 4.5  & x <= 5    ~ set_background(x, "darkgreen"),
             TRUE ~ set_background(x))))%>%
  kableExtra::kbl(align = "c",caption = "Project Scoring Table", escape=FALSE)%>%
  kableExtra::kable_styling(bootstrap_options = c("striped", "hover", "condensed", "responsive"),
                             full_width = F, 
                             font_size = 16)%>%
  kableExtra::row_spec(0,color = "white", background = "grey")%>%
  kableExtra::column_spec(1, 
                          bold = TRUE,
                          border_right = TRUE)%>%
  kableExtra::row_spec(0:3, align = "c",extra_css = "vertical-align:middle;")

resulting to the table as shown in the picture below :

enter image description here

What modifications I have to make in order the background color to cover the hole cell ?

Solution

  • Adapting my answer on How to fill entire cell of a table with cell_spec() in kabeleExtra? to your case you can fill the entire table cell by setting the margin for the cell value to -5px and counteracting with some padding of 5px. Additionally you have to set display: flex and add some extra CSS to center the values. Finally, to get rid of the rounded corners set background_as_tile=FALSE:

    library(dplyr, warn=FALSE)
set_background <- function(x, color = "white") {
  kableExtra::cell_spec(x,
    bold = TRUE,
    align = "center",
    color = "white",
    background = color,
    extra_css = "
      align-items: center;
      justify-content: center;
      margin: -5px;
      padding: 5px;
      display: flex;
    ",
    background_as_tile = FALSE
  )
}

set_background2 <- function(x, color = "black") {
  kableExtra::cell_spec(x,
    bold = TRUE,
    color = "black",
    background = color,
    extra_css = "
      align-items: center;
      justify-content: center;
      margin: -5px;
      padding: 5px;
      display: flex;
    ",
    background_as_tile = FALSE
  )
}

df %>%
  mutate(across(Name, \(x) case_when(
    Name == "Helen" ~ set_background2(x, "yellow"),
    Name == "John" ~ set_background2(x, "yellow"),
    TRUE ~ Name
  ))) %>%
  mutate(
    across(Pizza:Sweet, \(x)
    case_when(
      x > 3 & x <= 3.5 ~ set_background(x, "blue"),
      x > 3.5 & x <= 4.5 ~ set_background(x, "lightgreen"),
      x > 4.5 & x <= 5 ~ set_background(x, "darkgreen"),
      TRUE ~ set_background(x)
    ))
  ) %>%
  kableExtra::kbl(align = "c", caption = "Project Scoring Table", escape = FALSE) %>%
  kableExtra::kable_styling(
    bootstrap_options = c("striped", "hover", "condensed", "responsive"),
    full_width = F,
    font_size = 16
  ) %>%
  kableExtra::row_spec(
    0,
    color = "white",
    background = "grey"
  ) %>%
  kableExtra::column_spec(1,
    bold = TRUE,
    border_right = TRUE
  ) %>%
  kableExtra::row_spec(0:3, align = "c", extra_css = "vertical-align:middle;")

    enter image description here