Left border not showing on dash table

Question

I have these 2 tables centered inside a div but the left border doesn't always show. I tried playing around with the margin values but I can't figure out how to fix it.

Here's the code and screenshot:

 html.Div(children=[
    html.Div(children=[
        dash_table.DataTable(
            id='target_manual_thresholds',
            columns=[{"name": i, "id": i} for i in df_manual_thresh.columns],
            data=df_manual_thresh.to_dict('records'),
            editable=True,
            filter_action="native",
            sort_action="native",
            sort_mode="multi",
            column_selectable="single",
            row_selectable="multi",
            selected_columns=[],
            selected_rows=[],
            page_action="native",
            page_current=0,
            page_size=60,
            style_table={'overflowX': 'auto'}
        )
    ], style={'width': '35%', 'display': 'inline-block', 'margin': 25}),

    html.Div(children=[
        dash_table.DataTable(
            id='target_sec_der_thresholds',
            columns=[{"name": i, "id": i} for i in df_sec_der_thresh.columns],
            data=df_sec_der_thresh.to_dict('records'),
            editable=True,
            filter_action="native",
            sort_action="native",
            sort_mode="multi",
            column_selectable="single",
            row_selectable="multi",
            selected_columns=[],
            selected_rows=[],
            page_action="native",
            page_current=0,
            page_size=60,
            style_table={'overflowX': 'auto'}
        )
    ], style={'width': '35%', 'display': 'inline-block', 'margin': 25})],
    style={'textAlign': 'center', 'margin': 25})

Answer 1

The issue is with the overflow-x: auto for the tables. Move the overflow styling to the div containing the table and add some padding. This works for me:

html.Div(children=[
    html.Div(children=[
        dash_table.DataTable(
            id='target_manual_thresholds',
            columns=[{"name": i, "id": i} for i in df_manual_thresh.columns],
            data=df_manual_thresh.to_dict('records'),
            editable=True,
            filter_action="native",
            sort_action="native",
            sort_mode="multi",
            column_selectable="single",
            row_selectable="multi",
            selected_columns=[],
            selected_rows=[],
            page_action="native",
            page_current=0,
            page_size=60,
        )
    ], style={'width': '35%', 'display': 'inline-block', 'margin': 25, 'overflow-x': 'auto', 'padding': '5px'}),

    html.Div(children=[
        dash_table.DataTable(
            id='target_sec_der_thresholds',
            columns=[{"name": i, "id": i} for i in df_sec_der_thresh.columns],
            data=df_sec_der_thresh.to_dict('records'),
            editable=True,
            filter_action="native",
            sort_action="native",
            sort_mode="multi",
            column_selectable="single",
            row_selectable="multi",
            selected_columns=[],
            selected_rows=[],
            page_action="native",
            page_current=0,
            page_size=60,
        )
    ], style={'width': '35%', 'display': 'inline-block', 'margin': 25, 'overflow-x': 'auto', 'padding': '5px'})],
    style={'textAlign': 'center', 'margin': 25})

My best guess is that the overflow styling cuts off 1 pixel on the left due to the scrollbar, so moving it to the parent container and adding some paddings cuts off an irrelevant pixel instead.