python - DataTable 和 Map 组件并排或相互水平

Question

我有很多问题将我的地图组件对齐到我的数据网格组件的左侧。我希望每个组件并排。我尝试添加 Divs，包括属性和改变风格。请帮忙。

import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_leaflet as dl
import pandas as pd
import numpy as np
import dash_table_experiments as dt

lats = [28.538330, 34.729542, 40.712776]
lons = [-81.378883, -86.585297, -74.005974]
df = pd.DataFrame(columns=["lat", "lon"], data=np.column_stack((lats, lons)))

markers = [dl.Marker(position=[row["lat"], row["lon"]]) for i, row in df.iterrows()]

app = dash.Dash()

app = dash.Dash(external_stylesheets=['https://codepen.io/chriddyp/pen/bWLwgP.css'])

df = pd.read_csv('Foundational Data-LA057.csv')

def generate_table(dataframe, max_rows=10):
return html.Table([
    html.Thead(
        html.Tr([html.Th(col) for col in dataframe.columns])
    ),
    html.Tbody([
        html.Tr([
            html.Td(dataframe.iloc[i][col]) for col in dataframe.columns
        ]) for i in range(min(len(dataframe), max_rows))
    ])
])

colors = {
'background': '#111111',
'text': '#7FDBFF'
}

app.layout = html.Div([
html.Div(
    className="row",
    children=[
        html.Div([dl.Map(children=[dl.TileLayer(url="https://a.tile.openstreetmap.org/{z}/{x}/{y}.png"), dl.LayerGroup(markers)],
        style={'width': "100%", 'height': "100%"}, center=[38.627003, -90.199402], zoom=4, id="map"),
        ],           style={'width': '600px', 'height': '500px'}),

        generate_table(df)  
    ]
)
])


if __name__ == '__main__':
    app.run_server(debug=True)

标签： pythoncssplotlyplotly-dash