如何让Dash DataTable与应用布局中的其他组件对齐？

我正在开发一个Dash应用，布局包含两列组件：一列是地图（id为graph的dcc.Graph），另一列是直方图（id为graph-1的dcc.Graph）。在这两列下方添加Dash DataTable后，表格无法与上方组件对齐，请问有什么方法可以实现对齐？

原布局代码：

app.layout = dbc.Container([
      html.Div([
        html.H1(['Farm Tree Project Scotland'],style={'text-align':'center'}),
        html.Hr()
      ]),
      dbc.Row(
          [
              dbc.Col(
                  [
                   html.Label(['Select Region'],style={'font-weight':'bold'},),
                   dcc.Dropdown(id='region-dropdown',
                                options=[{'label':i,'value':i} for i in df['AddressRegion'].unique()],
                                multi= True

                   )
                  ]
              ),       
              dbc.Col(
                  [
                  html.Div(
                          [
                          dbc.Button('Submit', id='submit-button', color='primary', className='mr-1')
                          ],style={'margin-top':'20px'}
                  )
                  ]
              )

          ]
      ),


      dbc.Row(
          [
              dbc.Col(
              [
                html.Div([
                dcc.Graph(id = 'graph',figure=update_map(df))
                ])
              ],md=8
             ),
             dbc.Col(
             [
                html.Div([
                dcc.Graph(id = 'graph-1',figure=update_bar(df))
                ])
             ],md=4
             ),
             dbc.Col(
                     [
                     html.Div(id='hidden-div')
                     ],style={'display':'none'}
             )
          ]
      ),
      
  dash_table.DataTable(
      id='table',
      columns=[{'name': col, 'id': col} for col in df.columns],
      style_cell_conditional=[{'if': {'column_id': 'Code',} ,  'display': 'None',}],
      style_table={'overflowX': 'scroll'},
      style_cell={
          'minWidth': '100px', 'width': '100px', 'maxWidth': '90px',
          'height': 'auto',
          'overflow': 'hidden',
          'textOverflow': 'ellipsis','textAlign': 'left'
      }
  )
],fluid=True)

解决方法 #

问题核心是你直接将dash_table.DataTable放在dbc.Container的子元素列表中，未遵循Bootstrap网格布局的dbc.Row+dbc.Col结构，导致无法和上方组件对齐。以下是两种可行的解决方式：

方法1：让表格占满整行，与上方两列整体对齐 #

将表格放入dbc.Row中，再用默认占12列（整行）的dbc.Col包裹，这样表格会和上方行保持一致的左右边距：

app.layout = dbc.Container([
      html.Div([
        html.H1(['Farm Tree Project Scotland'],style={'text-align':'center'}),
        html.Hr()
      ]),
      dbc.Row(
          [
              dbc.Col(
                  [
                   html.Label(['Select Region'],style={'font-weight':'bold'},),
                   dcc.Dropdown(id='region-dropdown',
                                options=[{'label':i,'value':i} for i in df['AddressRegion'].unique()],
                                multi= True

                   )
                  ]
              ),       
              dbc.Col(
                  [
                  html.Div(
                          [
                          dbc.Button('Submit', id='submit-button', color='primary', className='mr-1')
                          ],style={'margin-top':'20px'}
                  )
                  ]
              )

          ]
      ),


      dbc.Row(
          [
              dbc.Col(
              [
                html.Div([
                dcc.Graph(id = 'graph',figure=update_map(df))
                ])
              ],md=8
             ),
             dbc.Col(
             [
                html.Div([
                dcc.Graph(id = 'graph-1',figure=update_bar(df))
                ])
             ],md=4
             ),
             dbc.Col(
                     [
                     html.Div(id='hidden-div')
                     ],style={'display':'none'}
             )
          ]
      ),
      # 用Row和Col包裹表格，实现整行对齐
      dbc.Row(
          [
              dbc.Col(
                  dash_table.DataTable(
                      id='table',
                      columns=[{'name': col, 'id': col} for col in df.columns],
                      style_cell_conditional=[{'if': {'column_id': 'Code',} ,  'display': 'None',}],
                      style_table={'overflowX': 'scroll'},
                      style_cell={
                          'minWidth': '100px', 'width': '100px', 'maxWidth': '90px',
                          'height': 'auto',
                          'overflow': 'hidden',
                          'textOverflow': 'ellipsis','textAlign': 'left'
                      }
                  )
              )
          ]
      )
],fluid=True)

方法2：让表格与左侧地图列（md=8）对齐 #

如果希望表格仅和上方左侧的地图列宽度保持一致，可给表格所在的dbc.Col指定md=8：

# 替换方法1中的Row部分
dbc.Row(
    [
        dbc.Col(
            dash_table.DataTable(
                id='table',
                columns=[{'name': col, 'id': col} for col in df.columns],
                style_cell_conditional=[{'if': {'column_id': 'Code',} ,  'display': 'None',}],
                style_table={'overflowX': 'scroll'},
                style_cell={
                    'minWidth': '100px', 'width': '100px', 'maxWidth': '90px',
                    'height': 'auto',
                    'overflow': 'hidden',
                    'textOverflow': 'ellipsis','textAlign': 'left'
                }
            ), md=8
        )
    ]
)

关键说明 #

Bootstrap网格基于12列布局，所有需要对齐的元素必须嵌套在dbc.Row和dbc.Col结构中，才能保证统一的间距和宽度规则。直接将组件放在dbc.Container下会脱离网格体系，导致对齐失效。

内容的提问来源于stack exchange，提问作者Konstantinos Sideris