Html table style

Below is the code snippet taken from dash user guide

def generate_html_table_from_df(df):
return html.Table(
# Header
[html.Tr([html.Th(col) for col in df.columns])] +
# Body
[html.Tr([
html.Td(df.iloc[i][col], style={‘padding-top’:‘2px’, ‘padding-bottom’:‘2px’,
‘text-align’:‘right’}) for col in df.columns
]) for i in range(len(df))], style={‘border’:‘1px’, ‘font-size’:‘1.2rem’}
)

how can I add style like below in this code.

tr:hover {background-color: #f5f5f5;}
tr:nth-child(even) {background-color: #f2f2f2;}

Based on this Stack Overflow answer, it looks like you can’t use pseudo-class selectors inline when styling HTML elements. So you’ll have to create a CSS style sheet and attach it.

2 Likes

It’s easy to do with CSS. Here is the guide: https://dash.plot.ly/external-resources