Table Style and CSS

Table Style and CSS#

As usual, we initialize ITables with init_notebook_mode, and we create two sample DataFrames:

Hide code cell source 
import pandas as pd

import itables.options as opt
from itables import init_notebook_mode, show
from itables.sample_dfs import get_countries

df = get_countries(html=False)
df_small = pd.DataFrame({"a": [2, 1]})

init_notebook_mode(all_interactive=True)

Classes#

Select how your table looks like with the classes argument (defaults to "display nowrap") of the show function, or by changing itables.options.classes.

Add "compact" if you want a denser table:

show(df, classes="display nowrap compact")
region country capital longitude latitude
code
Loading ITables v2.2.4 from the init_notebook_mode cell... (need help?)

Remove "nowrap" if you want the cell content to be wrapped:

show(df, classes="display")
region country capital longitude latitude
code
Loading ITables v2.2.4 from the init_notebook_mode cell... (need help?)

More options like "cell-border" are available:

show(df, classes="display nowrap cell-border")
region country capital longitude latitude
code
Loading ITables v2.2.4 from the init_notebook_mode cell... (need help?)

CSS#

You can use CSS to alter how the interactive DataTables are rendered.

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

from IPython.display import HTML, display

css = """
.dt-container {
  font-size: small;
}
"""
display(HTML(f"<style>{css}</style>" ""))

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

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

css = """
.dataTable th {
    font-weight: bolder;
    font-style: italic;
}
"""
display(HTML(f"<style>{css}</style>" ""))

You might also want to alter the style of specific tables only. To do this, add a new class to the target tables, as in the example below:

class_specific_css = ".table_with_monospace_font { font-family: courier, monospace }"
display(HTML(f"<style>{class_specific_css}</style>" ""))

show(df, classes="display nowrap table_with_monospace_font")
region country capital longitude latitude
code
Loading ITables v2.2.4 from the init_notebook_mode cell... (need help?)

The style argument#

The show function has a style argument that determines the style for that particular table.

The default value for style is "table-layout:auto;width:auto;margin:auto;caption-side:bottom". Without width:auto, tables with few columns are stretched to fit the container width. Using margin:auto makes non-wide tables centered.

Position and width#

You can set a specific width or position for a table using with the style argument of the show function:

show(df_small, style="table-layout:auto;width:50%;float:right")
a
Loading ITables v2.2.4 from the init_notebook_mode cell... (need help?)

or you can also change it for all tables by changing itables.options.style:

import itables.options as opt

opt.style = "table-layout:auto;width:auto"

Tip

For ajusting the height of a table, see the section on pagination.

Column width#

The columnDefs.width argument let you adjust the column widths.

Note that the default value of style, or of autoWidth (defaults to True), might override custom column widths, so you might have to change their values as in the examples below.

You can set a fixed width for all the columns with "targets": "_all":

show(
    df,
    columnDefs=[{"width": "120px", "targets": "_all"}],
    style="width:1200px",
    autoWidth=False,
)
region country capital longitude latitude
code
Loading ITables v2.2.4 from the init_notebook_mode cell... (need help?)

You can also adjust the width of selected columns only:

show(
    df,
    columnDefs=[{"width": "30%", "targets": [2, 3]}],
    style="width:100%;margin:auto",
)
region country capital longitude latitude
code
Loading ITables v2.2.4 from the init_notebook_mode cell... (need help?)

If you wish you can also set a value for columnDefs permanently in itables.options as demonstrated in the cell alignment example below.

Cell alignment#

You can use the DataTables cell classes like dt-left, dt-center, dt-right etc. to set the cell alignment. Specify it for one table by using the columnDefs argument of show

show(df, columnDefs=[{"className": "dt-center", "targets": "_all"}])
region country capital longitude latitude
code
Loading ITables v2.2.4 from the init_notebook_mode cell... (need help?)

or globally by setting opt.columnDefs:

opt.columnDefs = [{"className": "dt-center", "targets": "_all"}]
df
region country capital longitude latitude
code
Loading ITables v2.2.4 from the init_notebook_mode cell... (need help?)