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.