python - Dash Python 中的表格元素样式
问题描述
对 Python/Dash 来说非常新,并尝试为我的表格设置样式,以便内容垂直显示而不是水平显示(目前是这样),如下所示:
姓名 | 出生日期 | 电子邮件 |
---|---|---|
西蒙 | 1996 年 3 月 6 日 | dummyemail@email.com |
理想情况下,所有内容都将垂直显示,并且样式将用于将标签与其值相关联。谁能指出我这样做的正确方向?
app.layout = html.Div(children=[
html.H1('My Dashboard ', style={'font-weight': 'bold', 'text-align': 'left', 'color': 'white', 'backgroundColor': colors['background']}),
html.H3(' '
'Customer Interaction Dashboard'
' ',
style={'font-weight': 'bold', 'color': 'grey', 'text-align': 'center',
'padding': '10'}),
html.H1(' '
' '
' ',
style={'font-weight': 'bold', 'color': 'grey',
'padding': '10'}),
html.Div([
html.Div(' '
"""User ID or Customer Name""",
style={'margin-right': '2em', 'margin-left':'6em', 'color': 'grey', 'font-weight': 'bold', 'font-size': '15px', 'padding':
'20', 'margin-bottom': '40px'}),
# dropdown section
dcc.Dropdown(options=devices, id="input",
style={'width': '60%', 'verticalAlign': "middle", 'font-size': '12px', 'padding': '20'}),
], style=dict(display='flex')),
html.Div(children=[
html.Div(children=[
dash_table.DataTable(
id='profile_table',
columns=[
{"name": [" Profile Information ", "Name"], "id": "customerName"},
{"name": [" Profile Information ", "Date of Birth"], "id": "birthDate"},
{"name": [" Profile Information ", "Email Address"], "id": "EmailAddress"},
{"name": [" Profile Information ", "Status"], "id": "Active_Status"},
{"name": [" Profile Information ", "Products"], "id": "productName"}
],
merge_duplicate_headers=True,
data=[],
style_table={'display': 'inline-block',
'float': 'left',
'margin-right': '100px',
'margin-left': '50px',
'display': 'flex',
'width': '30%',
'border': '2px grey'},
style_as_list_view=True,
style_cell={'padding': '5px',
'fontSize': '18', 'font-family': 'sans-serif', 'textAlign': 'left',
'font-color': 'grey'},
style_header={
'backgroundColor': '#e1e4eb',
'fontWeight': 'bold',
'align': 'center'}
),
dash_table.DataTable(
id='table',
columns=[
{"name": ["Timeline"], "id": "EventDate"},
{"name": ["Timeline"], "id": "EventTime"},
{"name": ["Timeline"], "id": "EventClass"},
{"name": ["Timeline"], "id": "Message"},
],
data=[],
merge_duplicate_headers=True,
style_table={'display': 'inline-block', 'max-width': '600px', 'border': '2px grey',
},
style_as_list_view=True,
style_header={
'backgroundColor': '#e1e4eb',
'fontWeight': 'bold',
'align': 'center'
},
style_cell={
# all three widths are needed
'fontSize': '18', 'font-family': 'sans-serif', 'font-color': 'grey',
'minWidth': '300px', 'width': '300px', 'maxWidth': '600px',
'overflow': 'hidden',
'textOverflow': 'ellipsis',
'textAlign': 'left',
},
style_cell_conditional=[
{'if': {'column_id': 'EventDate'},
'width': '30%'},
{'if': {'column_id': 'EventTime'},
'width': '90px'}
# {'if': {'column_id': 'Pressure'},
# 'width': '130px'},
],
style_data={
'height': 'auto',
'width': 'auto'
},
style_data_conditional=[
{
'if': {
'filter_query': '{EventClass} = fraudFlag',
'column_id': 'EventClass'
},
'font-color': '#FF4136',
'backgroundColor': '#FF4136',
'color': 'white'
},
],
sort_mode='multi',
sort_action='native',
sort_by=[{'column_id': 'EventDate', 'column_id': 'EventTime','direction': 'desc'}]
)],
# style=dict(display='flex')
style={'border-color': 'grey', 'border-width': '7px'}
),
dcc.Interval(
id='interval_component',
interval=10000,
n_intervals=0,
),
html.Div(children=''''''),
] + [html.Div(id="out-all-types")])
])
解决方案
推荐阅读
- maven - 如何在代理后面配置 Maven
- powershell - 使用单个主 ps1 运行多个 ps1 脚本
- c++ - 无法使用 boost asio ssl use_certificate_chain_file 读取证书文件
- javascript - TypeError:无法读取未定义的属性“0”(使用在另一个函数中定义的正方形时发生错误)
- amazon-web-services - 我们如何在 AWS 胶水中触发多个作业?
- javascript - 自动刷新图像仪表板节点-红色
- linux - 如何避免在linux中解压缩文件时跳过错误的密码?
- vb.net - Google Drive API 如何在 vb.net 文件下载
- javascript - JS中数组的重新分配和“按引用传递”原则
- ios - “找不到框架 GoogleAppMeasurement” 手动添加框架时出错