DataTable expands beyond the boundaries of its assigned div by a few pixels horizontally

Dash Python
1

I have created a datatable and placed it inside a div that is colored and shadowed. However the DataTable expands beyond the width of the div by a few pixels horizontally which can be noticed by looking at the shadow on the bottom edge of the DataTable on the right:

Screen Shot 2020-11-19 at 7.50.35 PM
Screen Shot 2020-11-19 at 7.50.35 PM2470×796 169 KB

My layout is a bunch of Divs inside dbc.Row and dbc.Col calls to create a flex grid. The rule to fit html tables neatly into these Divs is to set style={‘width’: ‘100%’} to both the Div and the Table. Making the same assignment within the DataTables css hash or defining margin and padding seem to reduce the size appropriately.

How do I get a dt.DataTable to correctly fit inside a html.Div widthwise or adjust it if it does not?

2

setting style={‘width’: ‘90%’} didn’t reduce it either. Is there some other method to correctly set width?

3

solved it using:

            style_table={
                'maxHeight': '50ex',
                'overflowY': 'scroll',
                'width': '100%',
                'minWidth': '100%',
            },
1 Like
4

or not really. It fits but is still a few pixels too large and the final column is cut off and there is horizontal scrolling in place :disappointed:

5

It might have something to do with this: https://github.com/facultyai/dash-bootstrap-components/issues/372#issuecomment-627771580

6

solved it, thanks for your help!