Streamlit中DataFrame列名与索引文本颜色及宽度修改问题

一、修改行索引与列名的文本颜色 #

Streamlit原生st.dataframe的列名和行索引样式，得靠自定义CSS来改，替换你原来的st.markdown代码就行：

st.markdown("""
<style>
/* 调整列名（表头）的颜色和样式 */
div[data-testid="stDataFrame"] div[class^="css-164nlkn"] {
    color: #ff0000; /* 改成你要的颜色，比如红色 */
    font-weight: bold;
}
/* 调整行索引的颜色 */
div[data-testid="stDataFrame"] div[class^="css-1q8dd3e"] {
    color: #0000ff; /* 比如蓝色 */
}
/* 保留你原来的单元格样式设置 */
div[data-testid="stDataFrame"] div[class^="css-o1jpvw"] {
    color: black;
    background: white;
    font-weight: normal;
}
div[data-testid="stDataFrame"] div[class^="css-o1jpvw"]:hover {
    background: cyan;
}
</style>
""", unsafe_allow_html=True)

注：用data-testid="stDataFrame"精准定位DataFrame容器，避免影响其他组件；class^="xxx"匹配类名前缀，能适配Streamlit版本更新后的类名变化。

二、解决DataFrame宽度设置不生效的问题 #

st.dataframe的width参数经常受页面布局限制，两种解决办法：

• 全局宽布局：在脚本最开头加一行，让页面默认全屏宽度，width参数就能正常生效：

st.set_page_config(layout="wide")

• 强制CSS设置宽度：不想改全局布局的话，在之前的CSS里加一段，直接指定DataFrame容器宽度：

div[data-testid="stDataFrame"] {
    width: 800px !important; /* 换成你需要的宽度值 */
}

三、解决AgGrid左侧文本缺失的问题 #

AgGrid左侧文本缺失一般是列宽不够或者索引列被截断，这么改：

1. 手动设置列宽：初始化AgGrid时显式指定索引列和数据列的宽度：

from st_aggrid import AgGrid, GridOptionsBuilder

gb = GridOptionsBuilder.from_dataframe(max_purchasing)
# 设置索引列宽度，避免文本被截断
gb.configure_column("index", width=200)
# 设置数据列宽度
gb.configure_column("max_count_of_purchase/campaign", width=300)
grid_options = gb.build()

AgGrid(max_purchasing, gridOptions=grid_options, fit_columns_on_grid_load=False)

2. 开启自动换行与拖拽调整：在GridOptions里添加配置，让文本自动换行，还能手动拖拽列宽：

gb.configure_default_column(resizable=True, wrapText=True, autoHeight=True)

内容的提问来源于stack exchange，提问作者user14178341