How to change dataframe font size using CSS or other ways?

Using Streamlit
1

streamlit 1.40.2
pycharm 3.10.x
chrome browser

I am seeking a method to adjust the font size for the display of st.dataframe() in Streamlit. Despite extensive searching across various online platforms for a solution, I have yet to find a suitable one.

Here are the approaches I have explored:

  1. I have reviewed numerous posts on this forum and other websites with similar inquiries.
  2. I have followed suggestions from a tutorial video titled “How to apply custom CSS styles in Streamlit apps by Data Professor” on YouTube.

Potential solutions that I have come across include:

  1. Applying CSS styles.
  2. Utilizing df.to_html().
  3. Implementing Streamlit AgGrid.

Regarding method 2 (to_html()), it does not meet my requirements as I need to interact with the DataFrame post-display, such as selecting rows, filtering, and sorting.

As for method 3 (AgGrid), while it offers the capability to adjust the font size, I am content with using st.dataframe() as I have already developed many scripts reliant on this function. Hence, I prefer not to revise my code to incorporate AgGrid and introduce an additional third-party module that requires maintenance.

For the method 1 (CSS), I have attempted to apply CSS styles as illustrated below:

data = {
    'Name': ['Alice', 'Bob', 'Charlie'],
    'Age': [25, 30, 35],
    'City': ['New York', 'San Francisco', 'Los Angeles']
}

demo_df = pd.DataFrame(data)

st.markdown("""
<style>
Html dataframe id, class, tags??? { font-size: 20px}
</style>
""", unsafe_allow_html=True)

st.dataframe(demo_df)

Despite my efforts to identify the appropriate div id, class, or tags by inspecting the HTML elements, I fail to find the correct one to manipulate the font size of the DataFrame. Do somebody know the correct html tag used in CSS style?

Moreover, I am open to embedding a standard JavaScript snippet within my script if it can help resolve this issue. Any assistance would be greatly appreciated. Thank you!