Is it possible to center data on cell like Excel?

Using Streamlit
1

I was searching and couldn’t findy any solution. What I want to do center data in every cell. So this is my code

Steps to reproduce

Code snippet:

import streamlit as st
import pandas as pd
from openpyxl.styles import Alignment


st.set_page_config(page_title="IGUTOTS",
                   page_icon=":airplane:",
                   layout="wide"
                   )

ogr_no = st.number_input('Öğrenci Numaranızı Giriniz', value=0, key=int)
st.write('Öğrenci Numaranız ', ogr_no)

if ogr_no !=0:

    Str_int = str(ogr_no)
    deneme1 = slice(3)  
    bolum=Str_int[deneme1]

    df = pd.read_excel(
        io='igutots_df.xlsx',
        engine='openpyxl',
        #usecols='A:D',
        sheet_name=bolum,
        )

st.header('Öğrenci Bilgileri')
    df_ogr_bil = df_selection[['OGR_NO','AD','SOYAD','BÖLÜM/PROGRAM','TOPLAM VERİLEN MODÜL SAYISI']]
    st.dataframe(df_ogr_bil)

And this is the result.

image
image1522×217 39.3 KB

If you look at the last cell for example, it is not centered.

Help me Stremlit Community. You are my only hope…

Debug info

  • Streamlit version: 1.13.0
  • Python version: 13.10.8
  • No CONDA or others…
  • OS version: Windows 10 Pro
  • Browser version:
2

Unfortunately, there isn’t a built-in way to do this. You might be able to find a way to style the Pandas dataframe to center the text and then pass that dataframe to Streamlit.

1 Like
3

Awwww that’s sad. But thank you I will search for Pandas.

4

This is how I do it for centering both table header as well as table content cells:

s1 = dict(selector='th', props=[('text-align', 'center')])
s2 = dict(selector='td', props=[('text-align', 'center')])
# you can include more styling paramteres, check the pandas docs
table = df.style.set_table_styles([s1,s2]).hide(axis=0).to_html()     
st.write(f'{table}', unsafe_allow_html=True)

It will show a standard HTML table though, not an interactive widget.

4 Likes
5

Thank youuuuu

6

You are one of the awesome ones Wally. That code worked perfectly

2 Likes
7

Glad it worked. As I said, it is just a plain HTML table though, so it is not interactive. However, if you are just showing a bunch of rows/columns it is fine.
If you need to make it scrollable vertically/horizontally you can do so by adding some custom CSS and wrapping your table in a <div> and style that div. At least this is how I did it in my app, not sure if there is a better way.

8

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