Is there a z-index for the TableView Selection in JavaFx - javafx

Question

How can I set the z-index for the selection in a TableView. Some rows are conditional formatted and the formatting is overlying the Selection.
Screenshot of what I mean. Take a look at the last row!
Here is my RowFactory:
public void createRowFactory(){
final String CSS_OUTOFSTOCK = "outofstock";
mainTableView.setRowFactory(row -> {
return new TableRow<Artikel>(){
#Override
protected void updateItem(Artikel article, boolean empty){
super.updateItem(article, empty);
getStyleClass().removeAll(CSS_OUTOFSTOCK);
if(article != null){
if(article.mengeLagerProperty().get() == 0){
getStyleClass().add(CSS_OUTOFSTOCK);
}
}
}
};
});
}
And that's my CSS
.outofstock{
-fx-background-color: rgba(255, 159, 160, .4);
}

Answer 1

Here's how the default CSS from modena works for table rows and table cells:
The background color of a table row is set as a nested background depending on two looked-up colors:
.table-row-cell {
-fx-background-color: -fx-table-cell-border-color, -fx-background;
}
The insets are set as
.table-row-cell {
-fx-background-insets: 0, 0 0 1 0;
}
so the effect of this is that there is a 1-pixel border using -fx-table-cell-border-color along the bottom, and the rest of the row is colored in -fx-background.
-fx-background itself is defined as
.table-row-cell {
-fx-background: -fx-control-inner-background;
}
and overridden for odd rows with
.table-row-cell:odd {
-fx-background: -fx-control-inner-background-alt;
}
to give the striped effect.
Individual cells have no background color (so the background color of the row is visible), but they define a 1-pixel border on the right of each cell with
.table-cell {
-fx-background-color: null;
-fx-border-color: transparent -fx-table-cell-border-color transparent transparent;
}
When the row is selected, the looked-up color -fx-background is modified to take the value of a different looked-up color (essentially the bright blue, by default). Similarly the border color of the cell is modified to a lighter version of that color:
.table-row-cell:filled:selected {
-fx-background: -fx-selection-bar;
-fx-table-cell-border-color: derive(-fx-selection-bar, 20%);
}
Since you just change the background color of the table row directly, you lose the "nested background" (i.e. the border at the bottom of the row). The individual cells still draw their borders, which are either an off-white (if the row is not selected), or a blue (if the row is selected).
So you probably want to redefine each of the key looked-up colors for your CSS class, to inherit all the basic functionality (selection, borders, etc). For example:
.outofstock {
-fx-control-inner-background: rgba(255, 159, 160, .4);
-fx-selection-bar: rgba(255, 79, 80, .4);
}
You could also redefine -fx-table-cell-border-color if you want, though the default is quite neutral: #ececec.

Answer 2

I don't really understand the accepted answer despite reading it 1000x. It's overly complicated and fails to provide the exact css to get this to work. -fx-control-inner-background does nothing to set the background color of a cell when a custom cell factory is defined.
Here is simple css that I found works.
.table-row-cell:selected .outofstock {
-fx-background-color: -fx-accent;
-fx-border-color: -fx-accent;
}
-fx-accent is defined in .root (checkout javafx caspian.css). Its the color that defines what the table row selection is.