How do I align elements in differnet columns?

I want to create a table-like file download area and I’m using the latest version of Streamlit and Python 3.10. Here is my code:

files = os.listdir('./files')
col1, col2, col3 = st.columns(3)
for file in files:
    col1.write(file)

    file_grade = random.randint(1, 5)
    col2.write(file_grade)

    placeholder = col3.empty()
    check_button = placeholder.button('check', key=file)
    if check_button:
        check_permission(user_grade, file_grade, placeholder, file)

    st.divider()

Firstly I didn’t use st.divider() and found that the text didn’t align with the buttons due to different heights. Then I tried split rows with st.divider() and it didn’t work:

How can I align the text and buttons? Thank you!

Edit:
I also tried using st.container():

files = os.listdir('./files')
col1, col2, col3 = st.columns(3)
for file in files:

    with st.container(border=True):
        col1.write(file)

        file_grade = get_file_grade(file)
        col2.write(file_grade)

        placeholder = col3.empty()
        check_button = placeholder.button('check', key=file)
        if check_button:
            check_permission(user_grade, file_grade, placeholder, file)

        st.divider()

It also didn’t work:

Hi @Shaoyu_Li

You can add extra space to certain columns while making others smaller.

You can try st.columns((3, 2,1))

so that the first column is 3 times wider than the third column and 50% wider than the second column.

Hope this helps!

how about put st.columns inside for iteration?

files = ['a','b','c']
    for file in files:
        col1, col2, col3 = st.columns(3)
        col1.write(file)

        file_grade = random.randint(1, 5)
        col2.write(file_grade)

        placeholder = col3.empty()
        check_button = placeholder.button('check', key=file)
        st.divider()
1 Like

thank you! @oliverjia

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