Learn how to use Dash Bio for next-gen sequencing & quality control. 🧬 Register for the Oct 27 webinar.

Organizing Html tables on mobile - stopping overlap

Hey there,

I have a group of 3 Html tables that are horizontally stacked, this looks fine on the desktop however when I view this on a mobile/tablet the tables overlap each other.

is there a way to prevent this happening, I wouldn’t mind if they stack vertically on the mobile given the space parameters but would want to maintain the horizontal stacking on the desktop.

Callback groups the tables

children = html.Div([
                            html.H6('Title', style={'color': 'white'}, className="row"),
                                    html.Div([table1],className="four columns",
                                                  style={'display': 'inline-block', 'vertical-align': 'left'}),
                            html.Div([table2],className="four columns",
                                          style={'display': 'inline-block', 'vertical-align': 'left'}),
                             html.Div([table3],className="four columns",
                                            style={'display': 'inline-block', 'vertical-align': 'right'})],className="row"),

Should the callback be split into 3 to return 3 tables rather than returning the div in one callback? would that stop this happening?