Streamlit技术问题：点击DataFrame行展示详情+无滚动完整显示表格

实现点击行展示详细数据 #

Streamlit 1.21及以上版本支持st.dataframe的选择监听功能，通过配置参数可捕捉用户选中的行，再关联到详细数据表格进行展示。

设置表格完整显示无滚动 #

通过计算表格所需高度（按每行约35px+表头50px估算），搭配自定义CSS隐藏滚动条，让表格一次性完整展示所有内容。

完整代码示例 #

import streamlit as st
import pandas as pd

# 模拟业务数据（替换成你的真实数据）
df_main = pd.DataFrame({
    'ID': [1, 2, 3, 4],
    '名称': ['产品A', '产品B', '产品C', '产品D'],
    '类别': ['电子', '家居', '电子', '家居']
})

# 详细数据表格
df = pd.DataFrame({
    'ID': [1, 2, 3, 4],
    '名称': ['产品A', '产品B', '产品C', '产品D'],
    '类别': ['电子', '家居', '电子', '家居'],
    '价格': [199, 299, 399, 499],
    '库存': [50, 30, 20, 40],
    '描述': ['高性能电子产品', '实用家居用品', '智能电子设备', '舒适家居好物']
})

# 自定义CSS：强制隐藏表格滚动条，取消高度限制
st.markdown("""
<style>
    .stDataFrame {
        overflow: hidden !important;
    }
    .dataframe-container {
        max-height: none !important;
    }
</style>
""", unsafe_allow_html=True)

# 显示主表格：设置高度适配所有行，开启单行选择监听
selected_rows = st.dataframe(
    df_main,
    height=len(df_main)*35 + 50,  # 动态计算高度，确保所有行能显示
    use_container_width=True,
    on_select="rerun",
    selection_mode="single-row"
)

# 展示选中行的详细数据
if selected_rows['selection']['rows']:
    # 获取选中行的索引，匹配ID后取出详细数据
    selected_idx = selected_rows['selection']['rows'][0]
    target_id = df_main.iloc[selected_idx]['ID']
    detail_df = df[df['ID'] == target_id]
    
    st.subheader("详细信息")
    st.dataframe(detail_df, use_container_width=True)

关键说明 #

• 行点击交互：通过on_select="rerun"让选中行时触发页面重跑，selection_mode="single-row"限制只能选一行，避免多选中的混乱。
• 完整显示表格：动态计算height参数适配行数，再用CSS强制移除滚动条和高度限制，确保无需滚动就能看到所有内容。
• 数据关联：用ID作为关联字段，确保主表行和详细数据精准匹配，你可以根据实际业务替换成其他唯一标识字段。

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