great-tables icon indicating copy to clipboard operation
great-tables copied to clipboard

feat: add the `.opt_css()` method

Open rich-iannone opened this issue 2 months ago • 1 comments

This PR adds the .opt_css() method. It allows users to add custom CSS to HTML-output tables. This opt_*() method builds on the existing functionality of the tab_options(table_additional_css=) option by allowing users to more easily and safely append CSS rulesets to that Options parameter.

from great_tables import GT, exibble
import polars as pl

exibble_mini = pl.from_pandas(exibble).select(["num", "currency"])

(
    GT(exibble_mini, id="one")
    .fmt_currency(columns="currency", currency="HKD")
    .fmt_scientific(columns="num")
    .opt_css(
        css='''
        #one .gt_table {
          background-color: skyblue;
        }
        #one .gt_row {
          padding: 20px 30px;
        }
        #one .gt_col_heading {
          text-align: center !important;
        }
        '''
    )
)
image

Notice in that rendered table that: (1) body cells get a 'skyblue' background color, (2) the padding of body cells is increased horizontally and vertically, and (3) column-label text is now centered instead of being right-aligned.

Fixes: https://github.com/posit-dev/great-tables/issues/174

rich-iannone avatar Oct 01 '25 19:10 rich-iannone