Displaying pandas dataframes as HTML tables in documents with both R and Python code chunks

[joelostblom]

Description

I would like pandas dataframes to be displayed as they are displayed in jupyterlab/vscode notebooks (richly rendered tables where the width is restricted based on the number of characters in each column):

When I try to display pandas dataframe in quarto, it extends to the full with of the div instead:

Further complicating the issue is that my document mixes R and Python code, and when I do this the pandas dataframe is no longer rendered as an HTML table at all (which could be related to rstudio/reticulate#1474):

Is there currently any way to display pandas dataframes as width restricted HTML tables in documents that mix R and Py without setting the width and style of each one of them and converting them to markdown individually?

[mcanouil]

Unfortunately, screenshots of code are unusable in addition to be inaccessible as there are not alternative text.

Use keep-md: true. to see what you are outputting and make sure to output what you want.
See the documentation on computing and table processing.

For more help, please could you share a small self-contained "working" (reproducible) example to work with, i.e., a complete Quarto document or a Git repository? The goal is to make it as easy as possible for us to recreate your problem so that we can fix it: please help us help you! Thanks.

---

You can share a self-contained "working" (reproducible) Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).
See https://quarto.org/bug-reports.html#small-is-beautiful-aim-for-a-single-document-with-10-lines.

If you have multiple files (and if it is absolutely required to have multiple files), please share as a Git repository.

R	Python
````qmd --- title: "Reproducible Quarto Document" format: html engine: knitr --- This is a reproducible Quarto document. {{< lipsum 1 >}} ```{r} x <- c(1, 2, 3, 4, 5) y <- c(1, 4, 9, 16, 25) plot(x, y) ``` {#fig-placeholder} {{< lipsum 1 >}} The end after @fig-placeholder. ````	````qmd --- title: "Reproducible Quarto Document" format: html engine: jupyter --- This is a reproducible Quarto document. {{< lipsum 1 >}} ```{python} import matplotlib.pyplot as plt x = [1, 2, 3, 4, 5] y = [1, 4, 9, 16, 25] plt.plot(x, y) plt.show() ``` {#fig-placeholder} {{< lipsum 1 >}} The end after @fig-placeholder. ````

Additionally and if not already given, please share the output of quarto check within a code blocks (i.e., using three backticks ```txt), see https://quarto.org/bug-reports.html#check.

[joelostblom]

It's a single quarto file with the same structure as in #10459:

---
format: html
---

Python code:

```{python}
import pandas as pd

pd.DataFrame({'a': [1]})
```

R code:

```{r}
4 + 4
```

Quarto check is the same as in #10459

[mcanouil]

This is not really a Quarto question/issue, but again it is about how reticulate behaves inside knitr, see the various discussion on the repository: https://github.com/rstudio/reticulate/issues

For short, you need to emit markdown or HTML yourself.
If it does not work, then it's likely an issue with reticulate.

edit:

---
format: html
engine: knitr
---

```{python}
import pandas as pd
import seaborn as sns
from IPython.display import Markdown
mpg = sns.load_dataset("mpg").head(10)
taxis = sns.load_dataset("taxis").head(10)

Markdown(mpg.to_markdown(index = False))
Markdown(taxis.to_markdown(index = False))
```

```{python}
Markdown(pd.DataFrame({'a': [1]}).to_markdown(index = False))
```

Note that you should not use display() when using reticulate.

[joelostblom]

Thanks for the helpful example! I will read more in the reticulate issue tracker as you mentioned.

[mcanouil]

FYI

• coexistence of R and Python gives me inconsistent table renderings #3457

[joelostblom]

Thanks for the link! I explored a bit more and noticed that even when I use the Jupyter Engine, I can see the issue of HTML tables being stretched to the full width of the div rather than adapted to the width of the content:

Since there is no involvement of reticulate here, it seems like the default HTML table width is a setting somewhere in quarto. I tried disabling the stretching of the width via classes: plain, html-table-processing: none, tbl-colwidths (from https://quarto.org/docs/authoring/tables.html), but to no avail. Is there any way to change the default table width behavior to have something that looks like the jupyter output below instead?

Here is the code of what I tried so far:

---
format: html
jupyter: python3
---

```{python}
import pandas as pd
from IPython.display import HTML
```

```{python}
#| html-table-processing: none
HTML(pd.DataFrame({'a': [1, 2, 3, 4], 'b': [3, 4, 5, 6]}).to_html())
```

```{python}
#| classes: plain
HTML(pd.DataFrame({'a': [1, 2, 3, 4], 'b': [3, 4, 5, 6]}).to_html())
```

```{python}
#| tbl-colwidths: [5,20]
HTML(pd.DataFrame({'a': [1, 2, 3, 4], 'b': [3, 4, 5, 6]}).to_html())
```

[mcanouil]

Did you look at what you are producing using keep-md: true?

[joelostblom]

Thanks for the tip and sorry for the delayed reply; I was away for a few days. Inspecting the kept md file shows that the HTML produced looks like this:

::: {.cell-output .cell-output-display execution_count=4}

```{=html}
<table border="1" class="dataframe">
  <thead>
    <tr style="text-align: right;">
      <th></th>
      <th>a</th>
      <th>b</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>0</th>
      <td>1</td>
      <td>3</td>
    </tr>
    <tr>
      <th>1</th>
      <td>2</td>
      <td>4</td>
    </tr>
    <tr>
      <th>2</th>
      <td>3</td>
      <td>5</td>
    </tr>
    <tr>
      <th>3</th>
      <td>4</td>
      <td>6</td>
    </tr>
  </tbody>
</table>
```

:::

I don't see anything in the code that is specifying the width so it seems like this is how quarto handles HTML tables by default? Looking in the docs I also see that all tables in the examples are stretched to full width.

When I check the CSS applied in the developer console in the browser, I don't see anything specific for the dataframe class, but I do see width: 100% for the table class although changing this value does not change the width of the table (even with appending !important). Any idea of how the width of HTML tables can be controlled in quarto?

[mcanouil]

You can overwrite in several ways:

---
format: html
jupyter: python3
include-in-header:
  - text: |
      <style>
        .table {
          width: auto;
        }
      </style>
---

```{python}
import pandas as pd
from IPython.display import HTML
```


```{python}
HTML(pd.DataFrame({'a': [1, 2, 3, 4], 'b': [3, 4, 5, 6]}).to_html())
```