fixest etable size issue when using Quarto to render to html

Question

#| warning: false
#| cache: true
#| results: "asis"
#| label: tbl-ols
#| tbl-cap: Estimates"

library(fixest)
ols <- feols(Sepal.Length ~ Petal.Length, data = iris)

etable(ols,
       digits = 3,
       digits.stats = 3,
       fitstat = ~ n + r2,
       signif.code = c("***"=0.01, "**"=0.05, "*"=0.10),
       
       style.tex = style.tex("aer"),
       fontsize = "small",
       markdown = TRUE,
       tex  = TRUE)

In Quarto, when i render to pdf, the table displays normally. However, when I try to render to html, the table gets blown up proportionally much larger than the rest of the article rendered. I understand that when i set markdown = TRUE for etable, it generates a png for display when I render to html. How do I resize the png? Or is there an alternative solution? Thank you.

Answer 1

If you render etable to HTML, it creates an image-element within a div called etable. However, per default this image is not properly scaled, so it appears blown out of proportions compared to your article. To remedy this, you can include css into your yaml-header to set the width of DOM-elements with class = figure-img a.k.a. your etable-image. Here I set it to 80 % of the etable parent div, but you can change it as described here.

---
title: "etable"
format:
  html:
    include-in-header:
      - text: "<style>
          .figure-img {
            width: 80%; /* adjust width here */
          }
          </style>"
editor: visual
---

```{r}
#| warning: false
#| cache: true
#| results: "asis"
#| label: tbl-ols
#| tbl-cap: Estimates"

library(fixest)
ols <- feols(Sepal.Length ~ Petal.Length, data = iris)

etable(
  ols,
  digits = 3,
  digits.stats = 3,
  fitstat = ~ n + r2,
  signif.code = c("***" = 0.01, "**" = 0.05, "*" = 0.10),
  style.tex = style.tex("aer"),
  fontsize = "small",
  markdown = TRUE,
  tex  = TRUE
)
```

Edit 1:

You can change the class of the div to a custom name if needed using div.class, but changing the width of this parent element does not always also change the width of the child elements within it. In this case, setting the width of the surrounding div has no effect on the image width. You can however use the reference to the parent to set the css of all <img> DOM-elements below this class like

.etable img {width: 80%; }
          

assuming you did not use div.class, the div class defaults to etable. This would be useful, if all image elements within the etable container have no classes / different class names or not even any id / parameter to apply css to them. Fortunitely, this is not the case, and you can just adress the images with their class "figure-img"

---

Both will give your desired result: