Plotly Dash Table applies border radius only on one side

Question

My tables created with plotly dash apply rounded corners only on the left side. I tried all kinds of variations with borderRadius, borderCollapse and overflow combinations. Nothing helps

Style code:

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
)
        ]),

user_6714627 · Answer

Here's a little trick I used which enabled this to work — I simply inspected the table while running the app using Chrome DevTools, and messed around with changing different CSS until I got it to work.

So, what I did was then added that change into a "custom.css" file under a local ".assets/" directory, containing the following:

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

and here is the code for my (slightly) modified version of app.py which you provide:

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)

(I just made up random data for the pd.DataFrame.)

This resulted in the behavior I believe you are looking for; when running the app, I get:

Plotly Dash Table applies border radius only on one side

1 Answers