Search code examples
r-markdownkabletint

How to remove white padding/borders that tint::tintHtml added around cells in kable table?


I'd like to get rid of the white around each cells. When I knit to html_document there is no such padding.

I'm guessing the tint.css file is responsible for this (https://github.com/eddelbuettel/tint/blob/master/inst/rmarkdown/templates/tintHtml/resources/tint.css)

---
title: tintHtml() add padding to kable "
output:  tint::tintHtml
---
  
  
  
```{r}
library(kableExtra)
library(magrittr)
```


```{r}
knitr::kable(
  mtcars[1:6, 1:6], 
  caption = 'how do I get rid of white padding ?'
) %>%  
  row_spec(0, background = "blue", color = "white") %>% 
  row_spec(1, background = "green", color = "white") 

```

enter image description here


Solution

  • Step one: You may "right-click an element on a web page and select Inspect Element"

    enter image description here

    Step two: You will need to override the default border-spacing (Bootstrap CSS) property:

    The border-spacing property sets the distance between the borders of adjacent cells.
    Note: This property works only when border-collapse is separate.

    <style>
    table{
      border-spacing: unset;    # values: inherent, initial, unset or 0px
    }
    </style>
    

    Output:

    ---
    title: tintHtml() add padding to kable "
    output: tint::tintHtml
    ---
      
    ```{r}
    library(kableExtra)
    library(magrittr)
    ```
    <style>
    table{
      border-spacing: unset;    # inherent, initial, unset, 0px
    }
    </style>
    
    ```{r}
    knitr::kable(
      mtcars[1:6, 1:6], 
      caption = 'how do I get rid of white padding ?'
    ) %>%  
      row_spec(0, background = "blue", color = "white") %>% 
      row_spec(1, background = "green", color = "white") 
    ```
    

    enter image description here