Center dataframe header

[Joao_Couto]

Morning, guys. Could you help me? I’ve been struggling to get to center the dataframe header text. These column names style are kind of hard to change. I tried to use CSS, but I barely know CSS and it was really hard to locate the “css address” of what I had to change. In my streamlit dashboard, I could change form style and its button. But it’s been hard to do this with the dataframe.

st.markdown(“”"

.stButton > button {
background-color: rgb(245, 245, 245);
width: -webkit-fill-available;
}

.css-1544g2n h2 {
        text-align : center;
        color : white;
        font-weight: bold;
        font-size: 1.8rem;
}

.css-r421ms {
        border: 1px solid rgba(255, 255, 255, 2);
}

</style>

“”",
unsafe_allow_html=True
)

Anyway, I just want to introduce in this code that one piece left, to finally change, as well, the text align of the dataframe header.

[Charly_Wargnier]

Hi @Joao_Couto, and welcome to our community!

Could you please provide a reproducible code snippet so we can review it?

Best wishes,
Charly

[Joao_Couto]

Morning, @Charly_Wargnier. Thanks for answering and trying to help. The code is really big now. Briefly, I have a sidebar in which I’ve got this form with 4 fields and a button, that will append some info into the dataframe in the main page. So, in this main, I’ve got some filters to the dataframe and then I have the dataframe with 9 columns. The default header is text-aligned to the left. I wish I could center this text. I’ve googled it and i just find css solutions. Although I barely know css, I changed some styles like in the button background-color and its alignment inside the form; I also changed the form header style; Then I changed the form border style. But speaking of the dataframe, I just can’t inspect the css and html script (using F12) to get to know where’s the part I’ve got to change. In this example I gave, the locations I changed were .css-1544g2n h2 and .css-r421ms.

[Charly_Wargnier]

Thanks for your feedback, @Joao_Couto!

The code below centers the headers in your dataframe (see table #2 in the screenshot below)

import pandas as pd
import streamlit as st

df = pd.DataFrame({'Column1': [1, 2, 3], 
                   'Column2': [4, 5, 6],
                   'Column3': [7, 8, 9]})

df.style.set_properties(**{'text-align': 'center'}).set_table_styles([{'selector': 'th', 'props': [('text-align', 'center')]}])
st.markdown('<style>.col_heading{text-align: center;}</style>', unsafe_allow_html=True)
df.columns = ['<div class="col_heading">'+col+'</div>' for col in df.columns] 
st.write(df.to_html(escape=False), unsafe_allow_html=True)

It’s worth noting that you would lose functionalities such as sorting. If losing that is an issue, you may want to resort to 3rd party alternatives such as Plotly tables.

Have a look at this excellent tutorial from @misraturp to see how to integrate this library into Streamlit.

How to Make Tables in Streamlit Using Plotly

I hope this helps,

Best,
Charly

[Joao_Couto]

Thanks a lot, @Charly_Wargnier . But it’s kind of different from what I’ve expected. The dataframe style completely changed. And I just love the original dataframe style from streamlit. I wish I could only change this little part in the dataframe, using some kind of CSS knowledge, to inspect the location exactly and change that by adding something like .col_heading{text-align: center;} in my markdown.

I like this @misraturp video, but I am so close to do this one little change in streamlit dataframe that I can not imagine to raise a whole new table from scratch again.

[Charly_Wargnier]

Thanks @Joao_Couto!

I might actually hit up @lukasmasuch as he’s probably got some tips and tricks I haven’t thought of!

Best,
Charly

[lukasmasuch]

Unfortunately, this isn’t possible at the moment You can change the alignment of the cells but not the column headers. And since the dataframe uses HTML Canvas for rendering, there isn’t any CSS-based hack for this.

[Joao_Couto]

Thanks a lot for answering, @lukasmasuch. I’ve got used to this default style, now hahaha.