Stylizing td and th in tables

Dash Python
1

I want to stylize the td and th components of an html.table. Where do I incorporate that into the style? Basically I want

html.Table(
…,
style = {
‘table’ : ‘width’ : ‘100%’,
‘td’ : ‘border’ : ‘1px solid #dddddd’,
‘th’ : :text-align’ : ‘left’
}
)

How can this be done?

While we are at it, are hyperlinks as cell-entries supported in dash tables now?

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