解决Dash多级表头DataTable横向滚动右侧空白过多问题

我在用Plotly Dash构建应用时，遇到一个问题：展示两个多列的dash_table.DataTable组件，其中第一个表格采用多级表头，设置首列固定、其余列启用横向滚动后，多级表头表格在滚动时最后一列右侧出现大量空白，尝试调整CSS的overflow属性也没解决。

可行解决方案 #

这个问题是Dash中多级表头结合fixed_columns时的布局计算bug导致的，以下几种方法可以解决：

• 调整表格宽度设置：移除style_table中的width: 'max-content'，改用width: '100%'，让表格容器自适应父元素宽度，避免宽度计算错误。
• 给表格容器添加宽度约束：给包裹表格的data-table-container容器设置固定宽度或最大宽度，配合表格的overflowX: 'auto'实现正确的滚动区域计算。
• 升级Dash版本：如果使用的是较旧的Dash版本，升级到最新版可能已经修复了这个多级表头的布局问题。

修改后的示例代码 #

import dash
from dash import dash_table, dcc, html
import pandas as pd

app = dash.Dash(__name__)
app.title = 'test'

# Sample Data
data = {
    'Column 1': ['A', 'B', 'C', 'D'],
    'Column 2': [1, 2, 3, 4],
    'Column 3': [5, 6, 7, 8],
    'Column 4': [9, 10, 11, 12],
    'Column 5': [13, 14, 15, 16],
    'Column 6': [13, 14, 15, 16],
    'Column 7': [13, 14, 15, 16],
    'Column 8': [13, 14, 15, 16],
    'Column 9': [13, 14, 15, 16],
    'Column 10': [9, 10, 11, 12],
    'Column 11': [13, 14, 15, 16],
    'Column 12': [13, 14, 15, 16],
    'Column 13': [13, 14, 15, 16],
    'Column 14': [13, 14, 15, 16],
    'Column 15': [13, 14, 15, 16],
    'Column 16': [9, 10, 11, 12],
    'Column 17': [13, 14, 15, 16],
    'Column 18': [13, 14, 15, 16],
    'Column 19': [13, 14, 15, 16],
    'Column 20': [13, 14, 15, 16],
    'Column 21': [13, 14, 15, 16],
}
df = pd.DataFrame(data)

app.layout = html.Div(
    children=[
        dcc.Interval(id="interval", interval=5 * 60 * 1000, n_intervals=0),  # 5 minutes
        html.Div(id='raw-data', style={'display': 'none'}, children='{}'),
        html.H1(children='Test'),
        # Monthly Data Table
        html.Div(
            className="data-table-container",
            style={'width': '100%', 'maxWidth': '1400px'},  # 添加容器宽度约束
            children=[
                dash_table.DataTable(
                    id='table_monthly',
                    columns=[
                        {"name": ["A", "Column 1"], "id": "Column 1"},
                        {"name": ["A", "Column 2"], "id": "Column 2"},
                        {"name": ["B", "Column 3"], "id": "Column 3"},
                        {"name": ["B", "Column 4"], "id": "Column 4"},
                        {"name": ["B", "Column 5"], "id": "Column 5"},
                        {"name": ["C", "Column 6"], "id": "Column 6"},
                        {"name": ["C", "Column 7"], "id": "Column 7"},
                        {"name": ["C", "Column 8"], "id": "Column 8"},
                        {"name": ["C", "Column 9"], "id": "Column 9"},
                        {"name": ["C", "Column 10"], "id": "Column 10"},
                        {"name": ["D", "Column 11"], "id": "Column 11"},
                        {"name": ["D", "Column 12"], "id": "Column 12"},
                        {"name": ["D", "Column 13"], "id": "Column 13"},
                        {"name": ["E", "Column 14"], "id": "Column 14"},
                        {"name": ["E", "Column 15"], "id": "Column 15"},
                        {"name": ["E", "Column 16"], "id": "Column 16"},
                        {"name": ["E", "Column 17"], "id": "Column 17"},
                        {"name": ["F", "Column 18"], "id": "Column 18"},
                        {"name": ["G", "Column 19"], "id": "Column 19"},
                        {"name": ["G", "Column 20"], "id": "Column 20"},
                        {"name": ["H", "Column 21"], "id": "Column 21"},
                    ],
                    data=df.to_dict('records'),
                    fixed_columns={'headers': True, 'data': 1},
                    merge_duplicate_headers=True,
                    style_table={
                        'overflowX': 'auto',
                        'minWidth': '100%',
                        'width': '100%',  # 替换max-content为100%
                        'maxWidth': 'none'
                    },
                    style_cell={
                        'minWidth': 100, 'maxWidth': 200, 'width': 100,
                        'textAlign': 'center'
                    }
                )
            ]
        ),
        # Daily Data Table
        html.Div(
            className="data-table-container",
            style={'width': '100%', 'maxWidth': '1400px'},
            children=[
                dash_table.DataTable(
                    id='table_daily',
                    columns=[{'name': i, 'id': i} for i in df.columns],
                    data=df.to_dict('records'),
                    fixed_columns={'headers': True, 'data': 1},
                    style_table={
                        'overflowX': 'auto',
                        'minWidth': '100%',
                        'width': '100%',
                        'maxWidth': 'none'
                    },
                    style_cell={
                        'minWidth': 100, 'maxWidth': 200, 'width': 100,
                        'textAlign': 'center'
                    }
                )
            ]
        )
    ]
)

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

说明 #

修改了两个关键地方：一是给表格容器添加了maxWidth约束，避免表格过宽；二是把表格的width从max-content改为100%，让表格自适应容器宽度，解决了多级表头滚动时的空白问题。

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