如何在Dash仪表板中设置Dash DataTable宽度实现两表并排？

问题分析 #

你使用Dash Bootstrap Components（dbc）的Row和Col布局，期望两个DataTable各占6列宽度并排，但DataTable会自动拉伸至填满12列宽度，而图表类组件能正常适配Col的宽度限制。这是因为DataTable默认会尝试填充父容器的可用空间，若不明确设置表格的宽度规则，会忽略Col的宽度约束。

解决方案 #

给每个DataTable添加style_table配置，明确让表格继承父容器（即dbc.Col）的宽度，同时添加横向滚动保证表格内容不会溢出。具体需要：

• 在同一个dbc.Row中放置两个dbc.Col，每个Col的width=6
• 给每个DataTable设置style_table={'width': '100%', 'overflowX': 'auto'}

修改后的代码示例 #

from dash import Dash, dash_table
from dash import html
import dash_bootstrap_components as dbc
import pandas as pd

# 模拟测试数据
df_bu_convert = pd.DataFrame({
    "Business Unit": ["BU1", "BU2", "BU3"],
    "Ticket Count": [100, 200, 150]
})

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = html.Div([
    dbc.Row([
        # 第一个DataTable，占6列
        dbc.Col(
            dash_table.DataTable(
                data=df_bu_convert.to_dict("records"),
                columns=[
                    {'name': "Business Unit", 'id': 'Business Unit','type': 'text', 'editable':False},
                    {'name': "Ticket Count", 'id': 'Ticket Count','type': 'numeric', 'editable':False},
                ],
                # 关键配置：让表格适配Col宽度，内容溢出时横向滚动
                style_table={'width': '100%', 'overflowX': 'auto'}
            ),
            width=6
        ),
        # 第二个DataTable，占6列
        dbc.Col(
            dash_table.DataTable(
                data=df_bu_convert.to_dict("records"),
                columns=[
                    {'name': "Business Unit", 'id': 'Business Unit','type': 'text', 'editable':False},
                    {'name': "Ticket Count", 'id': 'Ticket Count','type': 'numeric', 'editable':False},
                ],
                style_table={'width': '100%', 'overflowX': 'auto'}
            ),
            width=6
        )
    ])
])

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

补充说明 #

• style_table={'width': '100%'} 强制表格宽度与父容器（dbc.Col）保持一致，不会超出Col的6列宽度限制
• overflowX: 'auto' 确保当表格列数较多、内容宽度超过Col宽度时，会自动显示横向滚动条，避免内容被截断或撑开容器
• 确保你的Dash app加载了Bootstrap样式（通过external_stylesheets=[dbc.themes.BOOTSTRAP]），否则dbc的Row/Col布局可能无法正常生效

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