Automatically resize data table on mobile?

I have a data table that I would like to resize horizontally to fit its container when on mobile. I have it scrolling with a fixed header vertically, but I’d like it to resize instead of adding a scroll bar horizontally.

(I’m not great at CSS so apologies if this is a wild easy question!)

Here is the data table:

dt = dash_table.DataTable(
    columns=[{"name": i, "id": i} for i in chart_w_features.columns],
        'overflowY': 'scroll', 
    style_cell={'textAlign': 'center'},
        'backgroundColor': 'rgb(30, 30, 30)',
        'color': 'white'
        'backgroundColor': 'rgb(50, 50, 50)',
        'color': 'white',

It sits in a row in the dashboard like this:

            html.H3(html.A('Full Chart', href="#top"), className="subheader"),
            html.Div(dt, style={"margin-top":"2rem"})

Hello @af412,

For the style_table, you’d just need to pass “overflowX”:“auto” for this.

Depending on the size of your mobile table, scrolling to the right or left can be cumbersome. What I do is actually hide the rows and then add a listener to expand the details below the active row when they click on a button to the left.