Unable to Center Table Horiontally

Dash Python
1

Hi

I am attempting to center my table horizontally and it isn’t working out for me.

I have tried using the follow css which works when I center my headings, but not on tables.

'text-align': 'center'

What am I doing wrong?

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

df = pd.read_csv('my.csv')

app = Dash(__name__)

app.layout = html.Div([
    html.H1(children="Heading 1", style=hdg_styles),
    html.H2(children="Heading 2", style=hdg_styles),
    html.P(children="paragraph", style=par_styles),

    dash_table.DataTable(
        data = df.to_dict('records'),
        columns=[{'id': c, 'name': c} for c in df.columns],
        style_cell={'textAlign': 'left'},
        style_table=tbl_styles)
])

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

Hello @kat,

Welcome to the community!

In the style_cells spot, it looks like you are setting all the centers to be textAlign left, is this what you want or you want to textAlign center?

3

Thank you for responding.

I would like the entire table centered horizontally.

error
error1446×360 22 KB

4

Oh. Ok.

You can do this by using something like dash-bootstrap-components. Use a dbc.Row and dbc.Col.

https://dash-bootstrap-components.opensource.faculty.ai/docs/components/layout/

Or if you don’t want to do that, you can wrap the table in a div and pass style={‘display’:’flex’,’justify-content’:’center’}