问题
我正在使用 new "v1.0"套房Dash (请参阅下面的点要求)。我想创建一个 DataTable
这是全宽(就像 <p>
元素)。
我已将表格设置如下(下面是完整的 MWE):
dash_table.DataTable(
…
style_table={
'maxHeight': '50ex',
'overflowY': 'scroll',
'width': '100%',
'minWidth': '100%',
},
…
但是,即使 <div class="cell cell-1-1 dash-fixed-content">
生成的 HTML 容器是全宽的,<table>
它包含不是,如下面的演示所示。
问题是……相同类似的代码适用于 Dash 0.x……
问题
Using Dash 1.0, how to make cells to auto-expand horizontally, so that the table fills up the entire horizontal space?
或者换句话说,如何设置 <table>
的样式元素通过DataTable
元素?
最小(有时不是这样)工作示例
使用 Dash 0.x:✓
-
0.x_requirements.txt
dash-core-components==0.39.0
dash-html-components==0.13.2
dash-renderer==0.15.1
dash-table==3.1.7
dash==0.31.1
datetime
pandas==0.23.4
plotly==3.4.1
-
0.x_testapp.py
import dash
import dash_table
import dash_html_components as html
import pandas as pd
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')
app = dash.Dash(__name__)
app.layout = html.Div(
[
html.P(
"foobar",
id='datatable-interactivity-container',
),
dash_table.DataTable(
id='table',
# data import
data=df.to_dict("rows"),
columns=[{"name": i, "id": i} for i in df.columns],
# table interactivity
editable=True,
# filtering=True,
sorting=True,
sorting_type="multi",
row_selectable="multi",
# row_deletable=True,
# table style (ordered by increased precedence: see
# https://dash.plot.ly/datatable/style in § "Styles Priority"
# style table
style_table={
'maxHeight': '50ex',
'overflowY': 'scroll',
'width': '100%',
'minWidth': '100%',
},
# style cell
style_cell={
'fontFamily': 'Open Sans',
'textAlign': 'center',
'height': '60px',
'padding': '2px 22px',
'whiteSpace': 'inherit',
'overflow': 'hidden',
'textOverflow': 'ellipsis',
},
style_cell_conditional=[
{
'if': {'column_id': 'State'},
'textAlign': 'left'
},
],
# style header
style_header={
'fontWeight': 'bold',
'backgroundColor': 'white',
},
# style filter
# style data
style_data_conditional=[
{
# stripped rows
'if': {'row_index': 'odd'},
'backgroundColor': 'rgb(248, 248, 248)'
},
{
# highlight one row
'if': {'row_index': 4},
"backgroundColor": "#3D9970",
'color': 'white'
}
],
),
]
)
if __name__ == '__main__':
app.run_server(debug=True)
使用 Dash 1.0:✗
-
1.x_requirement.txt
dash_renderer==1.0.0
dash-core-components==1.0.0
dash-html-components==1.0.0
dash-table==4.0.0
dash==1.0.0
pandas==0.24.2
plotly==3.10.0
-
1.x_testapp.py
import dash
import dash_table
import dash_html_components as html
import pandas as pd
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')
app = dash.Dash(__name__)
app.layout = html.Div(
[
html.P(
"foobar",
id='datatable-interactivity-container',
),
dash_table.DataTable(
id='table',
# data import
data=df.to_dict("rows"),
columns=[{"name": i, "id": i} for i in df.columns],
# table interactivity
editable=True,
# filtering=True,
sort_action="native",
sort_mode="multi",
row_selectable="multi",
# row_deletable=True,
# table style (ordered by increased precedence: see
# https://dash.plot.ly/datatable/style in § "Styles Priority"
# style table
style_table={
'maxHeight': '50ex',
'overflowY': 'scroll',
'width': '100%',
'minWidth': '100%',
},
# style cell
style_cell={
'fontFamily': 'Open Sans',
'textAlign': 'center',
'height': '60px',
'padding': '2px 22px',
'whiteSpace': 'inherit',
'overflow': 'hidden',
'textOverflow': 'ellipsis',
},
style_cell_conditional=[
{
'if': {'column_id': 'State'},
'textAlign': 'left'
},
],
# style header
style_header={
'fontWeight': 'bold',
'backgroundColor': 'white',
},
# style filter
# style data
style_data_conditional=[
{
# stripped rows
'if': {'row_index': 'odd'},
'backgroundColor': 'rgb(248, 248, 248)'
},
{
# highlight one row
'if': {'row_index': 4},
"backgroundColor": "#3D9970",
'color': 'white'
}
],
),
]
)
if __name__ == '__main__':
app.run_server(debug=True)
最佳答案
你可以在你的类中添加一个简单的词来为你的应用程序提供全宽表格。
对此:
<div class="cell cell-1-1 dash-fixed-content">
添加这个:
<div class="table table-bordered table-hover table-responsive cell cell-1-1 dash-fixed-content">
这将为您提供 100% 的总宽度,并且它本质上是响应式的。如何?尝试调整浏览器大小并查看效果。
希望这对您有所帮助。
关于css - 如何通过 `DataTable` 定义将 CSS 应用于 <table> 元素(使其宽度为 100%)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56806786/