Compact Table Output like Jupyter Defaults

[cnassar82]

Hello,

Is it possible to make the tables outputted by quarto look exactly like they do in the jupyter notebook?

The defaults in jupyter are nice and compact with every other line alternating between gray and white.

Thanks!

[jjallaire]

There isn't currently a high-level way to do this (although your issue is a reminder that this is feature we should implement soon!).

In the meantime, you can take advantage of the fact that Bootstrap is providing the CSS for Quarto documents and add this script to the bottom of your document to add the behaviors you are looking for:

```{=html}
<script type="text/javascript">
const tables = document.querySelectorAll(".cell .table");
tables.forEach(table => {
  // see https://getbootstrap.com/docs/5.0/content/tables/
  table.classList.add("table-sm", "table-striped");
});
</script>
```

[cnassar82]

Thanks! I'll give it a try later today!

[cnassar82]

It definitely looks better! Does the column width feature work for pandas tables? It doesn't seem to do anything for me.

[jjallaire]

The column width feature only works with markdown tables. If you can arrange for Pandas to output a markdown table then it should work. For example:

```{python}
#| tbl-colwidths: [30,70]
from IPython.display import Markdown
import pandas as pd
df = pd.DataFrame(
    data={"animal_1": ["elk", "pig"], "animal_2": ["dog", "quetzal"]}
)
Markdown(df.to_markdown(index=False))
```

[jjallaire]

The output does indeed look miles better! We will provide options for controlling this soon, in the meantime I've changed the default behavior to use small/striped here: 0a352d6