Plotly Dash：无法并排放置图形和表格

Question

我试图将图形和表格并排放置，但表格始终垂直显示在图形下方，尽管其水平位置正确。如果两个元素都是数字，类似的代码对我有用。这是一个最小的代码示例。

fig = make_subplots()
fig.add_trace(go.Scatter(x = [1,2,3], y = [1,2,3]))
df = pd.DataFrame({'col1': [1, 2, 3], 'col2': ['This is a test ', 'This is a test', 'This is a test'], 'col3': [99, 100, 101]})

app = dash.Dash(__name__)

app.layout = html.Div([
    html.Div([dcc.Graph(figure = fig)], style = {'width': '49%', 'display': 'inline-block'}),
    html.Div([dt.DataTable(
        data=df.to_dict('records'),
        columns=[{'id': c, 'name': c} for c in df.columns],
        style_table = {'height': 200, 'overflowX': 'auto'})], style = {'width': '49%', 'display': 'inline-block'}),
])

if __name__ == '__main__':
    app.run_server(debug = True)

这是我得到的图像：

Answer 1

尝试将图形和表格包含在Flex 容器中，即html.Div()with style={'display': 'flex'}。

import pandas as pd
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table as dt
import plotly.graph_objects as go

app = dash.Dash(__name__)

app.layout = html.Div([

    # Flex container
    html.Div([

        # Graph container
        html.Div([

            dcc.Graph(figure=go.Figure(data=go.Scatter(x=[1, 2, 3], y=[1, 2, 3]), layout=dict(margin=dict(t=0, b=0, l=0, r=0))))

        ], style={'width': '49%', 'display': 'inline-block'}),

        # Table container
        html.Div([

            dt.DataTable(
                data=pd.DataFrame({'col1': [1, 2, 3], 'col2': [99, 100, 101]}).to_dict('records'),
                columns=[{'id': c, 'name': c} for c in ['col1', 'col2']],
                style_table={'height': 200, 'overflowX': 'auto'}
            )

        ], style={'width': '49%', 'display': 'inline-block'}),

    ], style={'display': 'flex'}),

])

if __name__ == '__main__':
    app.run_server(host='127.0.0.1', debug=True)