Home  >  Q&A  >  body text

Implement different custom CSS (font color) for kable headers in continuous tables

<p>I want a blue title and then a red title. I<code>cat</code> two HTML <code><style>...</style></code> sections, first blue and second red, according to this answer, But I get red on both. </p> <p>How to get blue title and red title? </p> <pre class="brush:php;toolbar:false;">--- output: html_document --- ```{r setup, include=FALSE} knitr::opts_chunk$set(echo=FALSE) ``` ```{r results="asis"} cat(" <style> caption { color: blue; } </style> ") knitr::kable(head(iris), format="html", digits=4, row.names=FALSE, caption='Caption blue', escape=TRUE)|> kableExtra::kable_styling(font_size=14) |> kableExtra::kable_paper(c('hover', 'condensed', 'responsive'), full_width=T) |> kableExtra::scroll_box(width="100%", height="200px") ``` ```{r results="asis"} cat(" <style> caption { color: red; } </style> ") knitr::kable(head(iris), format="html", digits=4, row.names=FALSE, caption='Caption red', escape=TRUE) |> kableExtra::kable_styling(font_size=14) |> kableExtra::kable_paper(c('hover', 'condensed', 'responsive'), full_width=T) |> kableExtra::scroll_box(width="100%", height="200px") ```</pre>
P粉563831052P粉563831052435 days ago543

reply all(2)I'll reply

  • P粉865900994

    P粉8659009942023-09-02 14:35:18

    You can also provide a special HTML class for each table and collect all styles in a css block instead of specifying CSS in each block:

    ---
    output: html_document
    ---
    
    ```{r setup, include=FALSE}
    knitr::opts_chunk$set(echo=FALSE)
    ```
    
    ```{css}
    .mytable1 > caption {
        color: blue;
    }
    .mytable2 > caption {
        color: red;
    }
    ```
    
    ```{r results="asis"}
    knitr::kable(head(iris), 
                 format="html",
                 digits=4,
                 row.names=FALSE,
                 caption='Caption blue',
                 escape=TRUE)|>
      kableExtra::kable_styling(font_size=14, htmltable_class = "mytable1") |>
      kableExtra::kable_paper(c('hover', 'condensed', 'responsive'), full_width=T) |>
      kableExtra::scroll_box(width="100%", height="200px") 
    ```
    
    
    ```{r results="asis"}
    knitr::kable(head(iris), 
                 format="html",
                 digits=4,
                 row.names=FALSE,
                 caption='Caption red',
                 escape=TRUE) |>
      kableExtra::kable_styling(font_size=14, htmltable_class = "mytable2") |>
      kableExtra::kable_paper(c('hover', 'condensed', 'responsive'), full_width=T) |>
      kableExtra::scroll_box(width="100%", height="200px")
    ```

    Alternatively, we can insert inline CSS outside the block.

    <style>
    .mytable1 > caption {
      color: blue;
    }
    .mytable2 > caption {
      color: red;
    }
    </style>

    reply
    0
  • P粉156983446

    P粉1569834462023-09-02 00:44:29

    Because the second CSS overwrites the first CSS.

    Better to do this:

    cat("
    <style>
    .blue-caption {
          color: blue;
        }
    
    .red-caption {
          color: red;
        }
    </style>
    ")

    Then use like this:

    caption='<span class=\"blue-caption\">Caption blue</span>',
    caption='<span class=\"red-caption\">Caption red</span>',

    Is it valid?

    greeting, Noel

    reply
    0
  • Cancelreply