I’m trying to center a table on my streamlit app. I’ve come across numerous suggestions on the forum, but I’m surprised that this is not a feature in Streamlit. I have had some success using st.markdown with unsafe_allow_html=True, but it feels like a hack and often leads to unpredictable failure/success. Currently I can center align the table using markdown, but streamlit shows a small box on the top right of the table that says: div.
Are there any plans to add a native feature for centering components?
Yes, visual customization (including theming and layout) is expected in the next quarter! https://roadmap.streamlit.app/
In the meantime, if you want a centered dataframe/table that doesn’t take up the full width of your app, use three columns and place the dataframe in the middle column with use_container_width=True. You can make the first and third column smaller so the dataframe takes up the desired width (e.g. st.columns([1,10,1]).
2 Likes
st.table doesn’t have the arg use_container_width and using the columns left aligns the table with whichever column you put it in. I have to use st.table since I’m using pandas stylers.
But it’s great news that this is scheduled for an upcoming release!
I just tested, and I’m getting st.table to be the full container width by default. Is that not happening for you? (I checked the latest release and nightly.)
Actually, I forgot that I switched to using st.markdown to display the table since I could not get it to style appropriately with st.table.
Here’s the code:
st.markdown(style_df.to_html(), unsafe_allow_html=True).
Any ideas on how to get this to center on the page? I also don’t want the tabel to expand to the container width (I want to keep it compact).
If you’re working with the raw HTML, you can just set the width within that. Try using 100% view width on the whole table.
Is using three columns and putting the content of your table in the middle one a solution appliable to your case?
I needed to center some elements and this solution worked for me
