如何通过 `DataTable` 定义将 CSS 应用于 <table> 元素(使其宽度为 100%)?
Posted
技术标签:
【中文标题】如何通过 `DataTable` 定义将 CSS 应用于 <table> 元素(使其宽度为 100%)?【英文标题】:How to apply CSS to the <table> element through `DataTable` definition (to make its width be 100%)? 【发布时间】:2019-11-10 09:43:36 【问题描述】:问题
我正在使用Dash 的new "v1.0" 套件(请参阅下面的点子要求)。我想创建一个全宽的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……
问题
使用 Dash 1.0, 如何使单元格自动水平扩展,使表格填满整个水平空间?
或者换句话说,如何通过DataTable
元素来设置<table>
元素的样式?
最小的(有时不是)工作示例
使用 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)
【问题讨论】:
【参考方案1】:您可以在您的类中添加一个简单的单词,以便为您的应用程序提供全宽表格。
到这里:
<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% 的总宽度,并且它本质上是响应式的。如何?尝试调整浏览器大小并查看效果。
希望这会有所帮助。
【讨论】:
以上是关于如何通过 `DataTable` 定义将 CSS 应用于 <table> 元素(使其宽度为 100%)?的主要内容,如果未能解决你的问题,请参考以下文章
映射如何通过 .NET 中的 DataReader 通过 Load() 将数据读取到 DataTable?
如何通过不提交当前会话事务将 DataTable 作为参数传递给存储过程?
如何将 DataTable 行移动到其 DataTable 的第一个位置