Styling website around DataTable

Dash Python
1

Hi

I am new to dash and HTML and do some experiments. Now I have a problem with styling the app around DataTable.

As you can see in the picture, I have an ugly “white area” and the QR code is beside the DataTable and not below the DataTable.

website
website.png777×738 20.7 KB

My code:

app.layout = html.Div([

# https://dash.plot.ly/dash-daq/gauge
html.Div([
    daq.Gauge(
        id='gauge-chart',
        color={"gradient": True, "ranges": {
            "green": [0, 6], "yellow":[6, 8], "red":[8, 10]}},
        size=300,
        label="",
        showCurrentValue=True,
        units="MPH",
        value=5,
        max=10,
        min=0,
    )
], className='row', style={'textAlign': 'center'}),

html.Div([
    html.Label('24h interest since 2019-04-01'),
], className='row', style={'textAlign': 'center'}),

html.Div([
    dash_table.DataTable(
        id='table',
        columns=[{"name": i, "id": i} for i in df.columns],
        data=df.to_dict("rows"),
        style_header={
            'backgroundColor': colors['background_dark'],
            'fontWeight' : 'bold'
        },
        style_cell={
            'backgroundColor': colors['background'],
            'color': 'white',
            'minWidth': '30px', 'width': '50px', 'maxWidth': '90px'
        },
        style_cell_conditional=[
            {
                'if': {'column_id': c},
                'textAlign': 'center'
            } for c in df.columns
        ],
    )
], className='row four columns offset-by-four'),

html.Div([
    html.Label('Donate:'),
    html.Img(
        src='/assets/qrcode.png',
        style={'width': '120px'}
    )
], className='row', style={'textAlign': 'center'}),

], style={‘backgroundColor’: colors[‘background’], ‘color’: colors[‘text’]})

Questions:

  1. Why is the QR code and text element next to the DataTable and not below?
  2. I hate this “white area” and want to fill that with the “dark scheme” color. My guess was, when the QR Code is below the DataTable, the background color will change dark as well, because of fill-out the new “div region”.

Many thanks!