TL;DR VERSION

Using R + gt() + Quarto to render an html report. I want to reduce the padding around all three tables to 0px as shown below in the red box. This was done using a div id that changes each time the quarto report is run, so I need a solution that will target them without using a div id.

I thought this would be a css question but so far all my css solutions fail so I don't know if something in gt() or quarto will help solve.

In dev tools if I change the padding-top and padding-bottom in the following from 10px to 0px it works as intended:

<div class="cell-output-display">
<div id="rwxpuyzumb" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
... lots of other stuff ...
</div>

However, if I try selecting it with my styles.css I get mixed results. Every attempt selects them, but won't reduce under 10px. I can however increase the padding and it will work. Here is my styles.css with notes:

/* CSS */
.gt_table {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

/* If padding >10 it will increase the padding, but not decrease */
div.cell-output-display{
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    border: 2px dotted green;
}

/* This will reduce the padding as intended*/
/* But the div ids change when I re-run the report with a different date */
#rwxpuyzumb{
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    border: 2px solid red;
}

/* This will target the correct table, but also only increases padding */
.cell-output-display:nth-of-type(2){
    padding-top: 0px !important;
    padding-bottom: 50px !important;
    border: 2px solid yellow;
}

/* This will target the correct table, but also only increases padding */
.cell-output-display:nth-of-type(3){
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    border: 2px solid blue;
}

Here is the r/quarto code to generate these three tables.

---
title: "gt_padding"
format: 
  html:
    css: styles.css
editor_options: 
  chunk_output_type: console
---

```{r}
#| include: false
library(dplyr)
library(gt)

dat <- mtcars |> as_tibble(rownames = "car") |> head(4)
tab1 <- dat |> select(car,2:3) |> gt()
tab2 <- dat |> select(car,4:7) |> gt()
tab3 <- dat |> select(car,8:11) |> gt()
```

```{r}
#| echo: false
tab1
tab2
tab3
```

EDIT: I have also put the raw html and css on git if that's of any use. Found here:

TL;DR VERSION

Using R + gt() + Quarto to render an html report. I want to reduce the padding around all three tables to 0px as shown below in the red box. This was done using a div id that changes each time the quarto report is run, so I need a solution that will target them without using a div id.

I thought this would be a css question but so far all my css solutions fail so I don't know if something in gt() or quarto will help solve.

In dev tools if I change the padding-top and padding-bottom in the following from 10px to 0px it works as intended:

<div class="cell-output-display">
<div id="rwxpuyzumb" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
... lots of other stuff ...
</div>

However, if I try selecting it with my styles.css I get mixed results. Every attempt selects them, but won't reduce under 10px. I can however increase the padding and it will work. Here is my styles.css with notes:

/* CSS */
.gt_table {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

/* If padding >10 it will increase the padding, but not decrease */
div.cell-output-display{
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    border: 2px dotted green;
}

/* This will reduce the padding as intended*/
/* But the div ids change when I re-run the report with a different date */
#rwxpuyzumb{
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    border: 2px solid red;
}

/* This will target the correct table, but also only increases padding */
.cell-output-display:nth-of-type(2){
    padding-top: 0px !important;
    padding-bottom: 50px !important;
    border: 2px solid yellow;
}

/* This will target the correct table, but also only increases padding */
.cell-output-display:nth-of-type(3){
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    border: 2px solid blue;
}

Here is the r/quarto code to generate these three tables.

---
title: "gt_padding"
format: 
  html:
    css: styles.css
editor_options: 
  chunk_output_type: console
---

```{r}
#| include: false
library(dplyr)
library(gt)

dat <- mtcars |> as_tibble(rownames = "car") |> head(4)
tab1 <- dat |> select(car,2:3) |> gt()
tab2 <- dat |> select(car,4:7) |> gt()
tab3 <- dat |> select(car,8:11) |> gt()
```

```{r}
#| echo: false
tab1
tab2
tab3
```

EDIT: I have also put the raw html and css on git if that's of any use. Found here: https://github.com/stxlen/code_share

• css
• r
• quarto
• gt

• Did you already try to set the margins in the tab_options? gt(head(mtcars)) %>% tab_options( table.margin.top = px(0), table.margin.bottom = px(0) ) – dog Commented Feb 8 at 0:16
• There is only table.margin.left or table.margin.right in gt. Which led me down this rabbit hole. – seansteele Commented Feb 8 at 0:37
• 1 Have a look here gt.rstudio.com/reference/tab_options.html maybe container.padding.y ? There also might be some hidden bootstrapping going on – dog Commented Feb 8 at 0:41
• 1 So we stumbled upon an answer. Yes, before I looked into the css I tried container.padding.y and nothing moved. But for fun I tried again here and it worked. Turns out you need to both reduce the padding in gt and reduce the margin in css (unless I'm missing a way in gt). I'll write that up a solution and mark as completed. Thanks! – seansteele Commented Feb 8 at 1:01

2 Answers 2

Not sure if there is a more eloquent way but this works... It is a combination of modifying the padding options in gt and the margins in styles.css:

# r code
tab1 <- dat |> select(car,2:3) |> gt() |> tab_options(container.padding.y = px(0))
tab2 <- dat |> select(car,4:7) |> gt() |> tab_options(container.padding.y = px(0))
tab3 <- dat |> select(car,8:11) |> gt() |> tab_options(container.padding.y = px(0))

/* CSS */
.gt_table {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }

Result:

So it was as I assumed, the table is styled by the bootstrap.min.css. I can't count how many times this one made stuff like this difficult. So what happens is, that gt() uses a big .css file:

So, we need to overwrite these margins in .table AND also remove margin-top and margin-bottom form all divs inside cell-output-display:

We can do it like this. In css you can address child objects of a class which you know. In this case, the divs with random ids have divs as parents whith a constant class name. So we can overwrite them using this knowledge:

.cell-output-display div {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
}

The Trick

is to overwrite css in bootstrap.min.css by adding some custom style inside the body of the HTML:

---
title: "gt_padding"
format: 
  html:
    include-in-header:
      - text: |
          <style>
          body table.table {
            margin-top: 0px !important;
            margin-bottom: -1px !important;
          }
          .cell-output-display div {
            padding-top: 0px !important;
            padding-bottom: 1px !important;
          }
          </style>
editor_options: 
  chunk_output_type: console
---

```{r}
#| include: false
library(dplyr)
library(gt)

dat <- mtcars |> as_tibble(rownames = "car") |> head(4)
tab1 <- dat |> select(car,2:3) |> gt() 
tab2 <- dat |> select(car,4:7) |> gt() 
tab3 <- dat |> select(car,8:11) |> gt() 
```

```{r}
#| echo: false
tab1
tab2
tab3
```

which will give