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

这是我使用的一个小技巧，它使它能够工作——我只是检查了 table 而运行使用 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 编造了随机数据。）

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

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

Plotly Dash Table applies border radius only on one side

python

plotly-dash