\
**Category:** Dash Python\
**Created:** [February 17, 2018, 8:39am UTC](https://community.plotly.com/t/html-table-style/8406 "2018-02-17T08:39:01Z")\
**Posts on this page:** 3\
**Page:** 1
**Author:**  [@sssanalytics](https://community.plotly.com/u/sssanalytics)\
**Post date:** [February 17, 2018, 8:39am UTC](https://community.plotly.com/t/html-table-style/8406/1 "2018-02-17T08:39:01Z")
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;}
---
**Author:**  [@nedned](https://community.plotly.com/u/nedned)\
**Post date:** [February 17, 2018, 10:49am UTC](https://community.plotly.com/t/html-table-style/8406/2 "2018-02-17T10:49:23Z")
Based on this [Stack Overflow](https://stackoverflow.com/questions/131653/inline-style-to-act-as-hover-in-css) 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.
---
**Author:**  [@sparrow](https://community.plotly.com/u/sparrow)\
**Post date:** [March 27, 2019, 4:20pm UTC](https://community.plotly.com/t/html-table-style/8406/3 "2019-03-27T16:20:34Z")
It’s easy to do with CSS. Here is the guide: [https://dash.plot.ly/external-resources](https://dash.plot.ly/external-resources)