Putting two dash table side by side

Hi @Bambos

I think the best solution is using dash-bootstrap layout component.
With this tool you can easily manage the layout of the page and also define different layouts for different screen sizes.
Here is the link:
https://dash-bootstrap-components.opensource.faculty.ai/docs/components/layout/

If you need only a tip to solve your issue and do not want to learn bootstrap you can add margins in your code, like:

html.Div(dashtable1, style = {'display':'inline-block',
                              'color': 'white', 'margin-left': 100, 'margin-right';100
                              }),
    
    html.Div(dashtable2, style = { 'display': 'inline-block',
                             'color': 'white'
                             }),

    ] )

or align the second element to the right:

    html.Div(dashtable2, style = { 'display': 'inline-block',
                             'color': 'white', 'float': 'right'
                             }),
1 Like