CODEWITHSUNDEEP
rr-markdownknitrkableextraknitrbootstrap
stevec
stevec

Reputation: 52498

Compact table in html document rmarkdown with kableExtra?

I'm trying to make a 'compact' table in an RMarkdown

I've tried a few things, mostly variations on setting a custom css class and providing the custom css class to a code chunk

I've tried a lot of variations, all of which I can see flow through to the source code (accessed via knitting the html document, opening in chrome, and cmd + opt + u to view source and inspecting the source)

However, I can't work out what's necessary to simply make rows thinner (I believe that's simply reducing cell padding) in a kableExtra table

What I've tried so far

Here's one variation of what I've tried, but the rows are not compact as hoped (they are the standard height)

enter image description here

Which is done with:

---
output: html_document
---

```{r setup, include=FALSE}
library(dplyr); library(kableExtra)
knitr::opts_chunk$set(echo = TRUE, message = FALSE, warning = FALSE)
library(dplyr)
library(kableExtra)
```

<style>
pre code, pre, code {
    padding: 200 !important;
}
</style>

```{r}
iris %>% 
  kable %>%
  kable_styling("striped", full_width = F) %>%
  column_spec(4:5, bold = T) %>%
  row_spec(3:5, bold = T, color = "white", background = "#D7261E")
```

but note that the custom css is not taking effect

Upvotes: 0

Views: 1909

Answers (3)

MartineJ
MartineJ

Reputation: 795

To make the kable rows smaller in a knit to HTML, you can use bootstrap_options = c("condensed") in your kable_styling:

kable_styling(bootstrap_options = c("condensed"))

See https://cran.r-project.org/web/packages/kableExtra/vignettes/awesome_table_in_html.html

The pdf variant for it: https://cran.r-project.org/web/packages/kableExtra/kableExtra.pdf

Upvotes: 3

Tom Cotter
Tom Cotter

Reputation: 19

You could also do something similar within row_spec(1:nrow(iris), extra_css = "..")

Upvotes: 1

Radovan Miletić
Radovan Miletić

Reputation: 2821

The easiest way is to override the Bootstrap CSS, decreasing value of padding property (default value is 8px): 

<style>
.table>tbody>tr>td{
  padding: 1px;
}
</style>

As you pointed out, inspecting the source will lead you to the values above: enter image description here

Upvotes: 4

Related Questions