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

[roo]

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:

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

[roo]

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

[mikescha]

The original example is still failing to work as expected as of 25 Jan 23.

Using st.write or st.markdown does cause the text to be centered. However, those workarounds don’t help my scenario. In my case, my data is too wide to display on the screen, so I need the scrolling functionality that st.table and st.dataframe provide. For readability, I really want to find a way to just center the text using st.table or st.dataframe!