Streamlit not rending CSS correctly

Using Streamlit
1

Hi,

I am having issues with Streamlit rending CSS codes. I have the following for the CSS.

style =( 
       [{'selector': 'th.blank',
        'props': [('background', '#7CAE00'),('color', 'white')]},

       {'selector': 'th.index_name',
         'props': [('background', '#7CAE00'),('color', 'white'),('font-family', 'verdana'),('text-align', 'center')]},

       {'selector': 'th.col_heading',
        'props': [('background', '#7CAE00'),('color', 'white'),('font-family', 'verdana'),('text-align', 'center')]},

       {'selector': 'th.row_heading',
        'props': [('background', '#7CAE00'),('color', 'white'),('vertical-align','top'),('font-family', 'verdana'),('text-align', 'center'),('width', '160px'), ('height', '35px')]},
        
       {'selector': 'th.row_heading.level1',
        'props': [('background', '#7CAE00'),('color', 'white'),('font-family', 'verdana'),('vertical-align','middle'),('text-align', 'center'),('width', '160px'), ('height', '35px')]},

       {'selector': 'th.row_heading.level2',
        'props': [('background', '#7CAE00'),('color', 'white'),('font-family', 'verdana'),('vertical-align','middle'),('text-align', 'center'),('width', '160px'), ('height', '35px')]},

       {'selector': 'td',
        'props': [('font-family', 'verdana'),('font-size', '2px'), ('color', 'black'),('text-align','right')]},

#        {'selector': 'td.data',
#        'props': [('font-family', 'verdana'),('font-size', '2px'), ('color', 'black'),('text-align','right')]},

        {'selector': 'tr:nth-of-type(odd)',
        'props': [('background', '#DCDCDC')]}, 
                 
       {'selector': 'tr:nth-of-type(even)',
        'props': [('background', 'white')]},
                 
       {'selector': 'tr:hover',
        'props': [('background-color', 'yellow')]}
                
      ])

and the following instruction to display the table

st.markdown(df1.style.set_table_styles(style).to_html(),unsafe_allow_html=True)

Most of the tag are displaying correctly except the , it is showing dashes and not data, I tried to use ‘td.data’ also but di not work.

This code work in native python .

report
report1077×835 50.8 KB

Any suggestion?

Best Regards

2

What do you mean that this code works in native Python?

Are you saying that if you take df1.style.set_table_styles(style).to_html() as a string and save it to its own HTML file, that you can open it and see the data styled correctly?

3

What do you mean that this code works in native Python?

if I run this app in native python I get the following as result

report1
report11600×900 50.5 KB

This use less CSS style but is the same idea.

Are you saying that if you take df1.style.set_table_styles(style).to_html() as a string and save it to its own HTML file, that you can open it and see the data styled correctly?

No I am not saving to html I am trying to display the result. As you can see in the initial screenshot most tags are displaying correctly correctly except ‘td’.

Also doing my research on this issue I found the following discussion and try it but the html code was rendered .
https://discuss.streamlit.io/t/good-looking-table-for-a-streamlit-application-is-anyone-still-using-aggrid/63763/3
Here is wat shows.

report2
report21077×835 58.3 KB

4

Can you simplify your example into something I can execute? Can you hardcode a dataframe with just few cells to demonstrate the issue?

import streamlit as st
import pandas as pd
df = pd.DataFrame({"week":["Jan","Jan"],"company":["Raiser","Stripe"]})
style = "..."
st.markdown(df1.style.set_table_styles(style).to_html(),unsafe_allow_html=True)