Black Lives Matter. Please consider donating to Black Girls Code today.

Cell misalignment enable scroll-able html table

I would like to create a scrollable table in my apps but after i applied the below css the thead cell and tbody cell was misaligned and the width of each columns are not scaled as before. can somebody help to point out what went wrong in my code.

def generate_table(df1, df0):
rows = []
for i in range(len(df1)):
row = []
for col in df1.columns:
value = df1.iloc[i][col]
compare_value = df0.iloc[i][col]
if is_numeric(value):
style = cell_style(value, compare_value)
row.append(html.Td(value, style={‘textAlign’:‘center’, **style}))
else:
row.append(html.Td(value, style={‘fontSize’:‘18px’, ‘padding’:‘4px’}))
rows.append(html.Tr(row))

return html.Table([
    html.Thead([html.Tr([html.Th(col, style={'textAlign':'center', **table_colors['header']}) for col in df1.columns])]), html.Tbody(rows)
])

/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 12px 15px;
text-align: left;
border: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
}
th:first-child,
td:first-child {
padding-left: 0;
}
th:last-child,
td:last-child {
padding-right: 0;
}
/*tbody {
display: block;
height: 400px;
overflow: auto;
}
thead tr {
display: block;
width: 100%;
}

before

after

found a way to make autolayout the width for each column. but i still not able to change column to a hyperlink.

table {
display: flex;
flex-flow: column;
/height: 100%;/
width: 100%;
}
table thead {
/* head takes the height it requires,
and it’s not scaled when table is resized /
flex: 0 0 auto;
width: calc(100% - 1.05em);
}
table tbody {
/
body takes all the remaining available space */
flex: 1 1 auto;
display: block;
max-height: 300px;
overflow-y: scroll;
}
table tbody tr {
width: 100%;
}
table thead, table tbody tr {
display: table;
table-layout: fixed;
}
table th, table td {
padding: 2px 3px;
text-align: left;
border: 1px solid #e1e1e1;
}
table th:first-child,
table td:first-child {
padding-left: 4px;
}
table th:last-child,
table td:last-child {
padding-right: 4px;
}

just found the solution for the hyperlink here.