Streamlit中自定义HTML表格CSS不生效及GitHub部署疑问

直接给结论：把所有文件放到GitHub仓库后，直接通过仓库路径引用外部CSS文件无法正常渲染，但可以通过两种方案解决：

为什么GitHub直接引用不行 #

Streamlit运行时会为本地项目的static文件夹提供静态资源服务，自动挂载为可访问的资源路径。但GitHub仓库只是静态文件存储，没有这个服务机制，浏览器无法从GitHub仓库的路径加载CSS资源到Streamlit应用中，会出现资源无法访问或跨域问题。

可行解决方案 #

1. 内嵌CSS到HTML代码 #

把CSS样式直接写在HTML的<style>标签里，和表格代码一起渲染，这样样式会跟着HTML走，不受部署环境影响。示例代码：

# 定义CSS样式
css_content = """
.mystyle {
    border-collapse: collapse;
    width: 100%;
    margin: 1rem 0;
}
.mystyle th {
    background-color: #f2f2f2;
    font-weight: bold;
    padding: 0.8rem;
    text-align: left;
}
.mystyle td {
    padding: 0.8rem;
    border-bottom: 1px solid #ddd;
}
"""

# 生成带类名的表格HTML
table_html = df.to_html(classes="mystyle")

# 拼接完整HTML并渲染
full_html = f"<style>{css_content}</style>{table_html}"
st.markdown(full_html, unsafe_allow_html=True)

2. 保留static文件夹结构部署 #

如果是把GitHub仓库部署到Streamlit Community Cloud或其他支持的平台，只需在仓库中保留static文件夹结构，代码里读取CSS内容后通过st.markdown注入。项目结构示例：

your-github-repo/
├── app.py
└── static/
    └── df_style.css

对应的代码：

# 读取本地static文件夹里的CSS文件
with open("static/df_style.css", "r") as css_file:
    css_content = css_file.read()

# 注入CSS样式到页面
st.markdown(f"<style>{css_content}</style>", unsafe_allow_html=True)

# 渲染带类名的表格
table_html = df.to_html(classes="mystyle")
st.markdown(table_html, unsafe_allow_html=True)

部署时平台会识别static文件夹，确保样式正常加载。

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