I’m building a Dash app using Plotly that displays two tables dash_table.DataTable with many columns. The first table has multi-level header.

The first columns of each table are fixed and horizontal scrolling is enabled for the remaining columns.

I’m experiencing an issue when scrolling horizontally the table with multi-level header, which results in excessive blank space to the right of the last column (see screenshot).

I have tried using CSS to control overflow properties, but without success.

Has anyone experienced this problem before?

This is the example code to replicate the issue:

import dash
from dash import dash_table, dcc, html
from dash.dependencies import Input, Output
import pandas as pd
import numpy as np

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",
            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': 'max-content',  # Use max-content to fit contents
                        'maxWidth': 'none'
                    },
                    style_cell={
                        'minWidth': 100, 'maxWidth': 200, 'width': 100,
                        'textAlign': 'center'
                    }
                )
            ]
        ),
        # Daily Data Table
        html.Div(
            className="data-table-container",
            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': 'max-content',
                        'maxWidth': 'none'
                    },
                    style_cell={
                        'minWidth': 100, 'maxWidth': 200, 'width': 100,
                        'textAlign': 'center'
                    }
                )
            ]
        )
    ]
)

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

And this is a screenshot: