There is no “official” API to override the Markdown styles inside the DataTable. You can either include a css file in the app’s /assets folder or use the table’s css. You can apply a specific style for row/columns with data-dash-row and data-dash-column attributes. For example:
import dash
from dash_html_components import Div
from dash_table import DataTable
app = dash.Dash(__name__)
md='''Nested table
Statement | Is it true?
--- | ---
This page has two tables | yes
This table has two rows | no
This is an example of tableception | yes
'''
data=[
dict(a=md, b=md),
dict(a=md, b=md),
]
app.layout = Div([
DataTable(
columns=[
dict(name='a', id='a', type='text', presentation='markdown'),
dict(name='b', id='b', type='text', presentation='markdown'),
],
css=[
#
dict(selector='td table', rule='font-size: 16px;'),
dict(selector='td table tr > *', rule='text-align: left;'),
dict(selector='td[data-dash-row="1"] table', rule='font-size: 20px;'),
dict(selector='td[data-dash-row="1"][data-dash-column="b"] table', rule='font-family: cursive;')
],
data=data
),
])
app.run_server(debug=True)
Note that when using the css prop, the final selector will be prepended with a selector that is specific to the table for which the css prop is defined. Styles will not leak between tables. If using a css file instead, I suggest giving the DataTable an id to isolate styles on a per-table basis.
A close css equivalent, with id would be:
#my-table-id td table {
font-size: 16px;
}
/* Etc. */