调整 plotly-Dash 表格列宽答案

【问题标题】：Adjust plotly-Dash table column width调整 plotly-Dash 表格列宽
【发布时间】：2021-01-30 07:18:57
【问题描述】：

我想调整 Dash 表（从 Pandas Dataframe 创建）中的列宽。表中有 3 列：小路设想步骤

我想将第一列 (Path) 的列宽设置为 10%，第二列 (Scenario) 的列宽设置为 40%，最后一列 (Step) 的列宽设置为 50%。

我在代码下方运行，但列宽更改未按预期工作。 “路径”列占宽度的 50% 以上，“步骤”列占 20% 左右。数据框名称是 dfSteps

                columns=[{"name": i, "id": i} for i in dfSteps.columns],
                data=dfSteps.to_dict('records'),

                style_header={
                    'backgroundColor': 'rgb(230, 230, 230)',
                    'fontWeight': 'bold'
                },
               style_table={
                    'maxWidth': '2000px',
                    'overflowX': 'scroll',
                    'border': 'thin lightgrey solid'
                },

                 style_cell={
                    'font_family': 'cursive',
                    'font_size': '16px',
                    'border': '1px solid grey',
                    'minWidth': '1px', 'width': 'fixed', 'maxWidth': '1000px',
                    'textAlign': 'left', 'whiteSpace': 'normal'

                 },
            
                style_cell_conditional=[
                    {'if': {'column_id': 'Path'},
                     'width': '10%'},
                    {'if': {'column_id': 'Scenario'},
                     'width': '40%'},
                    {'if': {'column_id': 'Path'},
                     'width': '50%'},
                ],
        ),

【问题讨论】：

标签： pandas plotly-dash

【解决方案1】：

只需按照文档中的建议重新定义您的表格 https://plotly.com/python/table/

fig = go.Figure(data=[go.Table(
  columnorder = [1,2],
  columnwidth = [80,400],
  header = dict(
    values = [['<b>EXPENSES</b><br>as of July 2017'],
                  ['<b>DESCRIPTION</b>']],
    line_color='darkslategray',
    fill_color='royalblue',
    align=['left','center'],
    font=dict(color='white', size=12),
    height=40
  ),
  cells=dict(
    values=values,
    line_color='darkslategray',
    fill=dict(color=['paleturquoise', 'white']),
    align=['left', 'center'],
    font_size=12,
    height=30)
    )
])
fig.show()

【讨论】：