Centering/Aligning Anything

Using Streamlit
1

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?

2

Yes, visual customization (including theming and layout) is expected in the next quarter! https://roadmap.streamlit.app/

image
image1282×1646 323 KB

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
3

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!

4

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.)

5

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).

6

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.

7

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

8

3 columns doesn’t work since my dataframe can be different sizes (width and height), and 100% width produces close to my desired outcome, but for very small tables it looks way to spread out.

I ended up getting the table centered with the following code. I really hope an easier solution is on the way. Again, I had to use and st.markdown(df.to_html(), unsafe_allow_html=True) due to applying custom stylers to the table (not shown in example).

import streamlit as st
import pandas as pd

df = pd.DataFrame({
    'A': [1, 2, 3, 4, 5],
    'B': [10, 20, 30, 40, 50],
    'C': [100, 200, 300, 400, 500]
})

df_html = df.to_html()

top_window, bottom_window = st.container(), st.container()

# Apply ccs in bottom window to avoid adding a empty space in the app
# Target only the table inside the stMarkdownContainer within div containing "st-key-CUSTOM_TABLE_ID"
with bottom_window:
    st.markdown(
        """
        <style>
        .st-key-CUSTOM_TABLE_ID [data-testid="stMarkdownContainer"] table {
            margin-left: auto;
            margin-right: auto;
        }
        </style>
        """,
        unsafe_allow_html=True
    )

with top_window:
    # the key within container will add 'st-key-{key}' orto the divs class
    # This is what I see with inspect: <div class="stVerticalBlock st-key-CUSTOM_TABLE_ID st-emotion-cache-1n76uvr eu6p4el3" ...
    st.header('Center Table')
    with st.container(key='CUSTOM_TABLE_ID'):
        st.markdown(df_html, unsafe_allow_html=True)
9

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.