Border-left and border-right not work in style_data_conditional

Dash Python
1

I have a Datatable build with Dash Python. I am trying to set up the border-left for some columns in style_data_coditional. What I notice is that I am not able to set the border-left nor border-right. Although the border-top and border-bottom are set successfully in the callback function.
run_condition1 = {
“if”: {
“column_id”: id,
“filter_query”: “{” + str(id) + “} = ‘Run (1)\u0020’”,
},
“color”: “#5e9e4c”,
“fontWeight”: “bolder”,
“border-top”: “2px solid red”,
“border-bottom”: “2px solid red”,
“border-left”: “2px solid red”,
“border-right”: “2px solid red”,
}

        style_data_conditional.append(run_condition1)

image

This is the CSS in Chrome developer tool window:

image
image994×446 47.9 KB

I can manually add the border-left or border-right to element.style and it shows up in the datatable.
image
image

Does anybody know what’s going on here?

2

I just stumbled into this issue myself.

For me, the issue was caused by having style_as_list_view=True set on the DataTable. Once I disabled it, the left/right borders showed up as expected. I’m guessing that style_as_list_view does some massaging of various styles before the CSS is generated to get the desired set of final styles.

I tried disabling list style however this then means that you have default full borders set directly on all cell elements, and I’m not sure how best to override this easily without using style_as_list_view.

My solution was to use style_as_list_view=True and then apply the border-right to the desired column index using CSS, which does mean you lose the ability to target the column by ID, but might work in some situations.

#datatable .column-0 {
    border-right: 2px solid rgb(200,200,200);
}