JavaFX TableView change selected cell colour

Question

I have a JavaFX TableView and a ListView and they both use custom cell factories. In particular I have overridden updateItem method in order to bind a particular CSS class based on cell value.

This is part of my CSS file:

.tissueCell {
    -fx-text-fill: #F5AD11;
}

.tissueCell:selected {
    -fx-background-color: #F5AD11;
    -fx-text-fill: white;
}

.significantDataCell {
    -fx-background-color: yellow;
    -fx-text-fill: black;
}

.significantDataCell:selected {
    -fx-background-color: white;
    -fx-text-fill: black;
}

For the ListView everything work flawlessly: text is displayed with the proper colour and when the cell is selected the text becomes white and the background is filled with proper colour.

I am experiencing problems with the TableView instead. When unselected the text in the cell is displayed with the chosen colour, but when the cell is selected the background is filled with default JavaFX colour for selected table cells background and the text colour remains #F5AD11 (it does not become white).

The same happens with TableCells that use .significantDataCell class. Cells are displayed properly with yellow background and black text, but when selected nothing changes, not event the background this time.

Any ideas? I did a lot of research but couldn't find any working solution.

Answer 1

By default, TableViews do not allow selection of individual cells, but allow selection of rows. Thus the selector .table-cell:selected never matches any cell in the default selection mode. In this case, you would need

.table-row-cell:selected .table-cell {
    /* style definitions */
}

or in your scenario

.table-row-cell:selected .tissue-cell {
    -fx-background-color: #F5AD11;
    -fx-text-fill: white;
}

etc.

If you allow the table to use cell selection, by calling

myTableView.setCellSelectionEnabled(true);

then individual cells become selected on mouse click (etc), and so your original CSS will work.