Color trouble with Rmarkdown generated HTML tables

Question

Maybe this is just a stupid browser related issue, but ...

I generate some colored tables in a HTML file via Rmarkdown using the tableHTML package (colors are generated by the RColorBrewer package):

```{r Init, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
require(magrittr, quietly = TRUE)
require(tableHTML)
test <- data.frame(A=123, B=456, C=789)
```

...

```{r Test, echo=FALSE, results="asis"}
tableHTML(test) %>%
  add_css_thead(css = list('background-color', '#4DAF4A')) %>%
  add_css_table(css = list('border', '#4DAF4A'))
```

The colors of the borders look fine in the `Rstudio' viewer:

But the borders are colored different, when opening in Safari or Firefox:

What is the problem with table border colors?

Hm - just recognized that it works with Chrome. I hate browsers. Sometimes. Anyway - would be great to understand that. — Stefan Jelkovich, Nov 17 '20 at 23:43

clemens · Accepted Answer · 2020-11-23T13:40:31.860

2

Thank you very much for your question!

With add_css_table, the style is applied to the table-tag and with add_css-thead, it is applied to the thead tag. But I think to get the effect you are looking for, you can apply the styles to the th and td tags via the functions add_css_header and add_css_column:

tableHTML(test) %>%
    add_css_header(css = list(c("background-color", "border"),
                              c("#4DAF4A", "1px solid #4DAF4A")),
                   headers = 0:4) %>% 
    add_css_column(css = list("border", "1px solid #4DAF4A"),
                   columns = c("rownames", names(test)))

In RStudio, it looks like this:

In Firefox:

And in Chrome:

edited Nov 23 '20 at 13:40

answered Nov 23 '20 at 13:23

clemens

6,653
2
19
31

Thanks a lot @clemens. That's it! – Stefan Jelkovich Nov 24 '20 at 11:22
I am glad I could help! Feel free to mark the answer as accepted. – clemens Nov 24 '20 at 12:03

score 0 · Answer 2 · answered Nov 17 '20 at 23:55

0

According to https://www.colorhexa.com/4daf4a the closest websafe colour to "#4daf4a" is "#669933". Does changing the border to #669933 solve your problem?

answered Nov 17 '20 at 23:55

jared_mamrot

22,354
4
21
46

Thanks. Unfortunately the border colors remain different. But good to know about that link, featuring websafe colors. – Stefan Jelkovich Nov 18 '20 at 00:08
Sorry - I was fairly sure that would solve the problem - I'll look into it further – jared_mamrot Nov 18 '20 at 01:46

Color trouble with Rmarkdown generated HTML tables

2 Answers2