python - Plotly Dash Table 仅在一侧应用边框半径

Question

我用plotly dash创建的表格仅在左侧应用圆角。我尝试了 borderRadius、borderCollapse 和 overflow 组合的各种变体。没有任何帮助

样式代码:

style_header={'backgroundColor': '#305D91', 'color': '#FFFFFF', 'padding': '10px', 'border': '0'}
style_cell={
    
        'backgroundColor': '#FFFFFF',
        'color': '#000000',
        'fontSize':12, 'font-family':'sans-serif',
        'padding': '10px',
        'border': 'thin solid #FFFFFF',
         }
style_data_conditional=[
        {
            'if': {'row_index': 'odd'},
            'backgroundColor': '#E8E8E8',
        } ]

style_table={
        
       'borderRadius':'10px 10px',
       #'border-collapse': 'separate !important',
        #'maxHeight': '350px',
        #'maxWidth': '1200px',
        'overflow': 'hidden'
}
app.layout = html.Div([ 


html.Div([ html.Div('Q3', style=style)

     ]),


html.Div([ 

dash_table.DataTable(
data=df_Q3.to_dict('records'),
columns=[{'id': c, 'name': c} for c in select_broadest_df],

style_header=style_header,
style_cell=style_cell,
style_data_conditional=style_data_conditional,
style_table=style_table,
fill_width=False
)
        ]),

Answer 1

这是我使用的一个小技巧，它可以实现这一点 - 我只是在使用 Chrome DevTools 运行应用程序时检查了表格，并尝试更改不同的 CSS，直到它正常工作。

因此，我所做的就是添加更改为本地“.assets/”目录下的“custom.css”文件，其中包含以下内容:

.dash-table-container .dash-spreadsheet-container {
    display: table-cell!important;
}

这是您提供的我的(稍微)修改版本的 app.py 的代码:

import dash
from dash import html
from dash import dash_table

import pandas as pd
import numpy as np

app = dash.Dash(__name__)


style_header = {
    "backgroundColor": "#305D91",
    "color": "#FFFFFF",
    "padding": "10px",
    "border": "0",
}
style_cell = {
    "backgroundColor": "#FFFFFF",
    "color": "#000000",
    "fontSize": 12,
    "font-family": "sans-serif",
    "padding": "10px",
    "border": "thin solid #FFFFFF",
}
style_data_conditional = [
    {"if": {"row_index": "odd"}, "backgroundColor": "#E8E8E8"}
]

style_table = {"borderRadius": "10px", "overflow": "hidden"}

df_Q3 = pd.DataFrame(
    np.random.randint(0, 100, size=(10, 3)), columns=list("ABC")
)

app.layout = html.Div(
    [
        html.Div([html.H1("Q3")], id="title-div"),
        html.Div(
            [
                dash_table.DataTable(
                    data=df_Q3.to_dict("records"),
                    columns=[{"id": c, "name": c} for c in df_Q3.columns],
                    style_header=style_header,
                    style_cell=style_cell,
                    style_data_conditional=style_data_conditional,
                    style_table=style_table,
                    fill_width=False,
                    id="Q3-table",
                )
            ],
            id="Q3-table-div",
        ),
    ],
    style={"textAlign": "center", "margin": "10%"},
    id="main-body",
)


if __name__ == "__main__":
    app.run_server(debug=True, dev_tools_hot_reload=True)

(我刚刚为 pd.DataFrame 编写了随机数据。)

这导致了我相信您正在寻找的行为；运行应用程序时，我得到: