Dash Datatable: Highlight row on hover when using fixed panes

I am using fixed_columns={‘headers’: True, ‘data’: 2} to fix the first two columns in the datatable. I would like to highlight the entire row on hover. However, due to the “freeze panes” the table is separated into two blocks: Either the first two columns or the remaining columns of that row are highlighted.

The following CSS is working for a table without “freeze_panes”.
.dt-table-container__row-1 .cell-table tbody tr:hover td {
background-color: rgb(218, 230, 247);
transition: transform 0.1s linear;
-webkit-transition: transform 0.1s linear;
}

I tried to use jQuery but the row highlighting seem to disappear when the table refreshes.

Has anyone found a solution to this?

I have done some further investigation on this and reported an issue on github (Highlighting current cell (or row) with fixed_columns · Issue #871 · plotly/dash-table · GitHub).

In case someone has figured out a workaround, please let me know.