如何通过 `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(就像&lt;p&gt; 元素一样)。

我已将我的表设置如下(下面是完整的 MWE):

dash_table.DataTable(
    …
    style_table=
        'maxHeight': '50ex',
        'overflowY': 'scroll',
        'width': '100%',
        'minWidth': '100%',
    ,
    …

但是,即使&lt;div class="cell cell-1-1 dash-fixed-content"&gt; 生成的 html 容器是全宽的,它所包含的 &lt;table&gt; 也不是,如下面的演示所示。

问题在于……相同类似的代码适用于 Dash 0.x……

问题

使用 Dash 1.0, 如何使单元格自动水平扩展,使表格填满整个水平空间?

或者换句话说,如何通过DataTable元素来设置&lt;table&gt;元素的样式?


最小的(有时不是)工作示例

使用 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%)?的主要内容,如果未能解决你的问题,请参考以下文章

具有标签的 DataRows 的自定义 DataTable

映射如何通过 .NET 中的 DataReader 通过 Load() 将数据读取到 DataTable?

如何通过不提交当前会话事务将 DataTable 作为参数传递给存储过程?

如何将 DataTable 行移动到其 DataTable 的第一个位置

如何通过 Laravel DataTable 显示 HTML?

如何通过DataReader / DataTable进行查看?