'Change CSS - Dash Datatable height as % of container

I’m unable to set the height of a table to match the constrained height of a container:

table = dbc.Container(
            dash_table.DataTable(
                        id = 'tbl',
                        row_selectable = 'single',
                        selected_rows = [None],
                        selected_row_ids = [None],
                        data=df.to_dict('records'),
                        columns=[{'id': c, 'name': c ,  'type': table_type(df[c]), 'format':table_format(df[c])} for c in df.columns 
                                 # omit the id column
                                 if c != 'id'
                                ],
                        page_action = 'none',
                        style_table = {
                                       "max-height": "100%",
                                       #"height": "80vh",
                                       #"height" : "20vh", 
                                       #'overflowY':'auto',
                                       #'overflowX':'auto',
                                      },
                        sort_action = 'native',
                        # page_size=5,
                        fixed_rows = {"headers": True, "data": 0},
                        virtualization = True,
                        hidden_columns = [None],
                        style_cell = {
                            #'font-size':'10px',
                            # 'minWidth': '180px', 
                            #'width': '85px', 
                            #'maxWidth': '180px',
                            },
                        style_cell_conditional=[
                            
                            {'if': {'column_id': chem_columns}, 'width': '100px'},
                            
                        ],
                        style_data_conditional = get_style_data_conditional()
                            # col_width_computated,
                        ,
                        css=[{"selector": ".show-hide", "rule": "display: none"}],
                        fill_width=False,
            ),
            style={"height": "100%", "border": "5px #8c2c5c solid"}  
  )

I’ve tried to delete all the options but none worked. Is there any advice?

I've found that, by having a look with the DevTool of chrome, if I set the height:100% in the class dah-table-container it works! Unfortunately, I’ve no idea how to do it in the python code…

enter image description here

[SOLVED]

Add a CSS file option in asset folder located in app parent directory.

.dash-table-container{
height: 100% !important;
}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source