dbc.Table and html.Div have different backgrounds

Dash Python
1

Hello,

I have a dbc.Table and a Html.Div, which both have the same background color (#191919). However, when displayed they show a different color like in the image below. I have dbc.bootstrap.themes.Cyborg in use. Does anyone know a solution? Making the table background transparent or !important does not work either.
Best Regards
Clemens
Screenshot 2023-09-09 081551

2

Hi @cosco, could you please share your code? It’ll be easier to help you out.

3 
from dash import Dash, html
import dash_bootstrap_components as dbc
import pandas as pd

app = Dash(__name__, external_stylesheets=[dbc.themes.CYBORG])

df = pd.DataFrame(
    {
        "First Name": ["Arthur", "Ford", "Zaphod", "Trillian"],
        "Last Name": ["Dent", "Prefect", "Beeblebrox", "Astra"],
    }
)



RatioTable = dbc.Table.from_dataframe(df, 
                                               hover=False,
                                               responsive=False,
                                               striped=False,
                                               color="#191919")



app.layout = dbc.Container(html.Div([
                        dbc.Row([
                             dbc.Col(
                                 html.Div([RatioTable], style={"background-color" : "#191919",
                                                               "width" : "400px",
                                                               "height": "500px"})),

                        ])
]))
# Run the app
if __name__ == '__main__':
    app.run(host='127.0.0.1', port='3000', debug=False)
4

Hi @cosco

This was a little tricky - the color prop in the Table can’t use arbitrary colors - only the named Bootstrap colors such as “primary”, “secondary” etc. If you inspect the browser, you will see that Bootstrap has some other custom styling for the table, including this accent color for the background:

image
image1152Ă—328 52 KB

Here’s how to over-ride it:

RatioTable = dbc.Table.from_dataframe(
    df,
    hover=False,
    responsive=False,
    striped=False,
    # color="#191919"
    style={"--bs-table-accent-bg": "unset"},
)
2 Likes
5

Couldn’t find the work around, thanks @AnnMarieW!

1 Like