✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August 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([                                    
                                    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"),
                                          ],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?