CSS

CSS#

You can use CSS to alter how tables are rendered.

The recommended way to do this is to pass your CSS to itables.options.css (or to the css argument of show). This CSS is embedded in the HTML output of every table, so it is always guaranteed to be applied - unlike a standalone display(HTML(f"<style>{css}</style>")) cell, which some notebook front-ends (e.g. VS Code) may not render until that specific cell output is scrolled into view, see issue #572.

For instance, we change the font size for all the tables in the document with this code:

import itables

itables.options.css = """
.dt-container {
  font-size: small;
}
"""

itables.init_notebook_mode()

df = itables.sample_dfs.get_countries()

itables.show(df)

init_notebook_modetrusted

^ⓘ	region	country	capital	longitude	latitude
code
AW	Latin America & Caribbean	Aruba	Oranjestad	-70.016700	12.516700
AF	South Asia	Afghanistan	Kabul	69.176100	34.522800
AO	Sub-Saharan Africa	Angola	Luanda	13.242000	-8.811550
AL	Europe & Central Asia	Albania	Tirane	19.817200	41.331700
AD	Europe & Central Asia	Andorra	Andorra la Vella	1.521800	42.507500
AE	Middle East & North Africa	United Arab Emirates	Abu Dhabi	54.370500	24.476400
AR	Latin America & Caribbean	Argentina	Buenos Aires	-58.417300	-34.611800
AM	Europe & Central Asia	Armenia	Yerevan	44.509000	40.159600
AS	East Asia & Pacific	American Samoa	Pago Pago	-170.691000	-14.284600
AG	Latin America & Caribbean	Antigua and Barbuda	Saint John's	-61.845600	17.117500
(198 more rows not shown)

This is helpful for instance in the context of Quarto presentations.

With this CSS override, we change every datatable table header in the notebook to bold/italic.

itables.options.css = """
.dataTable th {
    font-weight: bolder;
    font-style: italic;
}
"""

itables.show(df)

^ⓘ	region	country	capital	longitude	latitude
code
AW	Latin America & Caribbean	Aruba	Oranjestad	-70.016700	12.516700
AF	South Asia	Afghanistan	Kabul	69.176100	34.522800
AO	Sub-Saharan Africa	Angola	Luanda	13.242000	-8.811550
AL	Europe & Central Asia	Albania	Tirane	19.817200	41.331700
AD	Europe & Central Asia	Andorra	Andorra la Vella	1.521800	42.507500
AE	Middle East & North Africa	United Arab Emirates	Abu Dhabi	54.370500	24.476400
AR	Latin America & Caribbean	Argentina	Buenos Aires	-58.417300	-34.611800
AM	Europe & Central Asia	Armenia	Yerevan	44.509000	40.159600
AS	East Asia & Pacific	American Samoa	Pago Pago	-170.691000	-14.284600
AG	Latin America & Caribbean	Antigua and Barbuda	Saint John's	-61.845600	17.117500
(198 more rows not shown)

You might also want to alter the style of specific tables only. To do this, either pass CSS to the css argument of show (rather than to itables.options.css), or add a new class to the target tables and target that class in your CSS, as in the example below:

class_specific_css = ".table_with_monospace_font { font-family: courier, monospace }"

itables.show(
    df,
    css=class_specific_css,
    classes="display nowrap table_with_monospace_font",
)

^ⓘ	region	country	capital	longitude	latitude
code
AW	Latin America & Caribbean	Aruba	Oranjestad	-70.016700	12.516700
AF	South Asia	Afghanistan	Kabul	69.176100	34.522800
AO	Sub-Saharan Africa	Angola	Luanda	13.242000	-8.811550
AL	Europe & Central Asia	Albania	Tirane	19.817200	41.331700
AD	Europe & Central Asia	Andorra	Andorra la Vella	1.521800	42.507500
AE	Middle East & North Africa	United Arab Emirates	Abu Dhabi	54.370500	24.476400
AR	Latin America & Caribbean	Argentina	Buenos Aires	-58.417300	-34.611800
AM	Europe & Central Asia	Armenia	Yerevan	44.509000	40.159600
AS	East Asia & Pacific	American Samoa	Pago Pago	-170.691000	-14.284600
AG	Latin America & Caribbean	Antigua and Barbuda	Saint John's	-61.845600	17.117500
(198 more rows not shown)

Tip

You can also inject CSS with display(HTML(f"<style>{css}</style>")). This still works, but the CSS only takes effect once that specific cell’s output has been rendered by the notebook front-end - in VS Code, an output that is scrolled out of view may not be rendered until you scroll back to it, so the itables.options.css/css= approach above is more reliable.