This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Description

table-layout: fixed, applied with

css=[{'rule': 'table-layout: fixed', 'selector': 'table'}]

is a way to force columns to have a certain width even if their content will overflow.

This rule does not apply to fixed rows and therefore this no way to force tables with fixed rows to have a certain width.

Here is what this looks like without fixed rows:

With Fixed Rows:

Reproducible example:

import dash
import dash_table
import dash_html_components as html
import pandas as pd
app = dash.Dash(__name__)
df = pd.DataFrame({
    'Column 1': 10 * ['Alpha Alpha Alpha Alpha', 'Beta Beta', 'Bananna Bananna', 'Cucumber Cucumber', 'Dynosaur Dynosaur'],
    'Column 2': 10 * ['Alpha', 'Beta', 'Bananna', 'Cucumber', 'Dynosaur'],
    'Column 3': 10 * ['Alpha', 'Beta', 'Bananna', 'Cucumber', 'Dynosaur'],
    'Column 4': 10 * ['Alpha', 'Beta', 'Bananna', 'Cucumber', 'Dynosaur'],
    'Column 5': 10 * ['Alpha', 'Beta', 'Bananna', 'Cucumber', 'Dynosaur'],
    'Column 6': 10 * ['Alpha', 'Beta', 'Bananna', 'Cucumber', 'Dynosaur'],
})
WIDTH = '10%'
app.layout = html.Div([
    html.Div(
        children='20% Width',
        style={
            'color': 'white',
            'width': WIDTH,
            'height': 20,
            'backgroundColor': 'hotpink'
        }
    ),
    dash_table.DataTable(
        data=df.to_dict('records'),
        columns=[{'id': c, 'name': c} for c in df.columns],
        fixed_rows={'headers': True},
        css=[{'selector': 'table', 'rule': 'table-layout: fixed'}],
        style_cell={
            'textOverflow': 'ellipsis',
            'overflow': 'hidden'
        },
        style_cell_conditional=[{
            'if': {'column_id': 'Column 1'},
            'width': WIDTH,
        }]
    )
])
if __name__ == '__main__':
    app.run_server(debug=True)