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?