Centering/Aligning Anything

Using Streamlit
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)