Unable to center table cell values with pandas style | Need input to see if this is even possible with streamlit

Context: I have a dataframe I want to display on streamlit and I’d like to center the cell values (they’re at the right by default for some reason). For that, I’ve been trying to use pd.df.style.set_table_styles and set_properties to center the cell values but no luck so far. They seem to work for some of the alterations, but centering the values just doesn’t work for some odd reason.

Minimal reproducible example:

th_props = [
  ('font-size', '14px'),
  ('text-align', 'left'),
  ('font-weight', 'bold'),
  ('color', '#6d6d6d'),
  ('background-color', '#eeeeef'),
  ('border','1px solid #eeeeef'),
  #('padding','12px 35px')
]

td_props = [
  ('font-size', '14px'),
  ('text-align', 'center'),
]

cell_hover_props = [  # for row hover use <tr> instead of <td>
    ('background-color', '#eeeeef')
]

headers_props = [
    ('text-align','center'),
    ('font-size','1.1em')
]
#dict(selector='th:not(.index_name)',props=headers_props)

styles = [
    dict(selector="th", props=th_props),
    dict(selector="td", props=td_props),
    dict(selector="td:hover",props=cell_hover_props),
    # dict(selector='th.col_heading',props=headers_props),
    dict(selector='th.col_heading.level0',props=headers_props),
    dict(selector='th.col_heading.level1',props=td_props)
]
arrays = [
    ["bar", "bar", "baz", "baz", "foo", "foo", "qux", "qux"],
    ["one", "two", "one", "two", "one", "two", "one", "two"],
]
tuples = list(zip(*arrays))

index = pd.MultiIndex.from_tuples(tuples, names=[None, "Brand"])

df = pd.DataFrame(np.random.randn(3, 8), index=["A", "B", "C"], columns=index)

# table
df=df.style.set_table_styles(styles,overwrite=False).set_properties(**{'text-align':'center'})
st.table(df)

Current output:

The table currently looks like this:

As you can see, I’m able to modify the table and even align the row indices all the way to the left, but I can’t find the way to center the cell values (and the headers/columns as well for that matter!)

I also know this is working because when I pass the style object to_html() and render the HTML output, I get something like this:

image

As you can see, HTML sees that text-align: center is being used. For some reason, streamlit is not capable of passing these properties to the table…

How could I do that?

Thanks

Okay so doing this:

st.markdown(df.style.set_table_styles(styles).to_html(),unsafe_allow_html=True)

Seems to work, but I’d still like to know if there’s a way to do this using st.table or st.dataframe. Using st.markdown seems a bit hacky for displaying tables. Also, using markdown I lose the “use_container_width” option so the tables are smaller and don’t fill the whole container width