I am attempting to:
create a border around the outside of the table make the border have a radius When I apply styling by stating either all 4 border sides individually (like below), the lines between each row also become solid orange. If I comment 1 side out, the lines between rows are not impacted. I don’t want them changed.
Also, I am able to make the corners have a radius, but I cannot figure out how to make the border follow this radius. In my example, the border I add has square corners, but you can still faintly see the table has a radius.
Any help is appreciated!
import dash_bootstrap_components as dbc
from dash import html
import dash
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
columns = ["1", "2"]
rows = [["Aa", "B"], ["C", "D"]]
headers = [html.Thead(html.Tr([html.Th(header) for header in columns]))]
all_rows = []
for i, row in enumerate(rows):
individual_row = [html.Td(data) for data in row]
all_rows.append(html.Tr(individual_row))
table_body2=[html.Tbody(all_rows)]
table2 = dbc.Table(
headers+table_body2,
hover=True,
style={
'width': '30%',
'backgroundColor':'white',
'border-right': '1px solid orange',
'border-left': '1px solid orange',
'border-top': '1px solid orange',
#'border-bottom': '1px solid orange',
'border-radius': '20px',
'margin': 'auto'
}
)
app.layout = html.Div([table2], style={'backgroundColor':'#F8F8F8'})
if __name__ == "__main__":
app.run_server(debug=True)
Add this to your style.
border-style: hidden;
box-shadow: 0 0 0 1px orange;