Jupyter cell directive to set custom styles

[liquidcarbon]

Description

Is there a way to achieve this using a cell directive?

df.style.set_table_styles([{
    'selector': 'th, td',
    'props': [('text-align', 'right')]
}])

Basically, want the equivalent of what can easily do with markdown tables: https://quarto.org/docs/blog/posts/2022-02-15-feature-tables/

But broader nice-to-have would be the ability to set a custom class AND define its style in the same cell. Is that possible?

Something like

#| classes: .th-td-right {text-align: right;}

related: #3964

[cderv]

How are you producing your table withing computation cell ?

If you are generating HTML table, the style you set should be set.

If you are generating Markdown table, you should use tool that knows how to produce pipe tables

Example:

```{python}
#| label: tbl-planet-measures
#| tbl-cap: Astronomical object

from IPython.display import Markdown
from tabulate import tabulate
table = [["Sun","696,000",1.989e30],
         ["Earth","6,371",5.972e24],
         ["Moon","1,737",7.34e22],
         ["Mars","3,390",6.39e23]]
Markdown(tabulate(
  table, 
  headers=["Astronomical object","R (km)", "mass (kg)"],
  colalign = ("left", "right", "right")
))
```

If you want to set some HTML style on tables using CSS, you can use the CSS selector that match the id you set on the table div#tbl-planet-measures table . Something like that.

Quarto does not generate the table, so it is quite hard to do something a YAML option that contains style to apply on a HTML table element.

classes cell option exists to set some class on the output cells divs.

[liquidcarbon]

The table is Pandas dataframe displayed in the cell. Basically, the first cell here.
The .style approach is fine but it seems like Quarto should be able to do it.
I'd rather not have to convert it to Markdown.

[cderv]

So if I understand correctly, you would like a generic way to style a table produced in a chunk by a Table package, like Pandas ?

In your example, using pandas will output a HTML table in the intermediate table, with some styles set by Pandas already

---
title: "Untitled"
format: html
keep-md: true
---

```{python}
#| label: tbl-tab
#| tbl-cap: Table
import pandas as pd
df = pd.DataFrame({'x': [1,2], 'y': [3,4], 'name': ['Alice', 'Bob']})
df
```

Extract of style set

<style scoped>
    .dataframe tbody tr th:only-of-type {
        vertical-align: middle;
    }

    .dataframe tbody tr th {
        vertical-align: top;
    }

    .dataframe thead th {
        text-align: right;
    }
</style>

Obviously, tweaking the style is possible using pandas' function as you did.

Otherwise, using CSS within a Quarto theme allows tweaking the styles too for your tables (like the font). We could probably see with Bootstrap support how to add more variables (https://quarto.org/docs/output-formats/html-themes.html#sass-variables) targetting tables only 🤔

At last, Quarto does parse HTML table by default to easily apply some feature, and common formatting across tools. One of the feature is to easily apply some Bootstrap classes to table for quick styling of individual table

---
title: "Untitled"
format: html
keep-md: true
---

:::{#tbl-tab}

```{python}
import pandas as pd
df = pd.DataFrame({'x': [1,2], 'y': [3,4], 'name': ['Alice', 'Bob']})
df
```

A table caption {.info .bordered}

:::

It is not perfect yet, because it can conflict with the internal style set by pandas and we do apply a default style to computation table that is not unsettable for now

• Option to disable table striping in computational tables? #6945

[liquidcarbon]

Thanks a lot for your response. I think the directive I was after is #| class-output: https://stackoverflow.com/questions/74026514/how-to-apply-css-style-to-quarto-output

Would would it take to make the below possible?

#| class-output: { text-align: right; }

import pandas as pd
df = pd.DataFrame({'x': [1,2], 'y': [3,4], 'name': ['Alice', 'Bob']})
df

[cderv]

This is a matter of CSS and HTML element.

About this, #| class-output: { text-align: right; } , this is really a mix of several things. { text-align: right; } is CSS, it needs to be applied to a selector or something. class-output in knitr ecosystem is for setting a class onto the output div, no matter what is inside.

Quarto equivalent of class-output would be #| classes:, which will apply a class to the output div. Example:

```{python}
#| classes: my-table
import pandas as pd
df = pd.DataFrame({'x': [1,2], 'y': [3,4], 'name': ['Alice', 'Bob']})
df
```

This means that your table will be somewhere below a div.my-table and you can then easily target using CSS in your theme file.

This is what the SO question is about but using a knitr only option. classes is from Quarto and cross language so working for python and Julia too

Is this what you are looking for ?

This seems like a good way to target a specific element, and several tables (but not all of them) the same way by applying the same class.