Search code examples
cssrquartogt

I can't reduce div padding with gt, quarto, or css

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.

three table example

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

Solution

  • 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:

    out1

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

    out2

    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

    out2