Stylizing td and th in tables

Dash Python
2

You need to style the actual html.Td or html.Th objects, or create CSS for it that is applied to a given table or over all instances of the table. A few examples:

Styling with tag classes:

# in your CSS file
table {
    width: 100%;
}
td {
    border: 1px solid #dddddd;
}
th {
    text-align: left;
}

---
# in your app.layout
...
html.Table([
    html.Tr([html.Th('Title', style=head_style),...]),
    html.Tr([html.Td('Data', style=row_style)])
])
...

I recommend using classes instead of changing all the tags in the app:

# CSS
table.classname {...}
table.classname td {...}
table.classname th {...}
# app
html.Table(className='classname', children=[...])

Styling each individually (more effort):

head_style = dict(fontSize='25px',color='red')
row_style = dict(fontSize='15px',color='blue')
...
html.Table([
    html.Tr([html.Th('Title', style=head_style),...]),
    html.Tr([html.Td('Data', style=row_style)])
])
...
2 Likes