Seeking Dash Table Styling Advice: Round Corners Thickness Challenge

39 Views Asked by At

Seeking a bit of guidance on a Dash table challenge. I've managed to add borders to my table and even threw in some roundy corners for that aesthetic touch. However, I'm facing a bit of a hiccup—the roundy corners appear thin, unlike the thick outside borders.

Just to keep it simple, I'd prefer not to use HTML, div, or box-shadowing. Wondering if any Dash wizards out there have a nifty way to make those roundy corners match the thickness of the outside borders? I've been tinkering around but haven't cracked the code yet.

Here's a sample of what I've got:

import dash
from dash import dcc, html
import dash_table

app = dash.Dash(__name__)

app.layout = html.Div([
    dash_table.DataTable(
        id='my-table',
        columns=[
            {'name': 'Column 1', 'id': 'col1'},
            {'name': 'Column 2', 'id': 'col2'},
            {'name': 'Column 3', 'id': 'col3'},
        ],
        data=[
            {'col1': 1, 'col2': 2, 'col3': 3},
            {'col1': 4, 'col2': 5, 'col3': 6},
            {'col1': 7, 'col2': 8, 'col3': 9},
        ],
        style_table={
            'border-collapse': 'separate',
            'border-spacing': '0',
            'border': '1px solid red',
            'borderRadius': '20px',
            'overflow': 'hidden',
            'position': 'relative',
        },
        style_cell={'border': '1px solid red', 'padding': '8px'},  # Adjust padding as needed
        style_header={'backgroundColor': '#your-header-color', 'fontWeight': 'bold'},  # Set your desired header background color
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)

I tried border-collapse, border-spacing, ::before and ::after pseudo-elements, individual borders such as borderTopLeftRadius, borderTopRightRadius and so on.

0

There are 0 best solutions below