如何在绘图破折号框架中居中对齐表格？

【问题标题】：How to center-justify a table in plotly dash framework?如何在绘图破折号框架中居中对齐表格？
【发布时间】：2020-07-21 13:52:31
【问题描述】：

我是 dash 的新手，正在尝试将我使用函数创建的表格居中对齐。我已经从 SQL DB 中获取的表的数据。在破折号布局中，我尝试对表格本身使用样式，但它不起作用。样式仅适用于页面上的文本。 Df 是我没有发布的数据框，因为它与样式无关。我需要在布局中应用样式还是在函数中创建表格时应用样式？

def generate_table(dataframe, max_rows=1000):
    return html.Table([
        html.Thead(
            html.Tr([html.Th(col) for col in dataframe.columns])
        ),
        html.Tbody([
            html.Tr([
                html.Td(dataframe.iloc[i][col]) for col in dataframe.columns
            ]) for i in range(min(len(dataframe), max_rows))
        ])
    ])


app.layout = html.Div(children=[
    html.H2(
        children='Products',
        style={
            'textAlign' : 'center' 
        }
    ),
    generate_table(df)
])

【问题讨论】：

标签： plotly plotly-dash

【解决方案1】：

一个简单的解决方法是将style={'marginLeft': 'auto', 'marginRight': 'auto'} 添加到html.Table。所以你的功能会变成：

def generate_table(dataframe, max_rows=1000):
    return html.Table([
        html.Thead(
            html.Tr([html.Th(col) for col in dataframe.columns])
        ),
        html.Tbody([
            html.Tr([
                html.Td(dataframe.iloc[i][col]) for col in dataframe.columns
            ]) for i in range(min(len(dataframe), max_rows))
        ])
    ], style={'marginLeft': 'auto', 'marginRight': 'auto'})

一个更好的主意是添加className="center" 并将以下内容添加到.css 文件中：

.center {
  margin-left: auto;
  margin-right: auto;
}

【讨论】：