This repository was archived by the owner on Aug 29, 2025. It is now read-only.
This repository was archived by the owner on Aug 29, 2025. It is now read-only.
"table-layout: fixed" does not work with fixed_rows // ability to force fixed column width with fixed_rows #748
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)