Question

我是破折号的新手，并试图居中对齐使用函数创建的表。我已经从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)
])

Answer 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;
}

如何在绘图仪表板框架中居中对齐表格？

1 个答案: