Changing background colour in TableCell removes selection colour, makes it hard to read

trilogy :

I made this change:

Change TableColumn background in TableView, whilst retaining alternating row colour?

It looks good unselected:

:

However when you select a cell:

It looks like this, but I'd like it to act normally when selected/focused.

I'm pretty sure I need to use a style class, however, I don't know what the attributes you need to retain every other feature of a TableCell just with a different colour background. Also, do I apply the style class at the Cell level or on the column level?

UPDATE

My css file: custom.css

.customhighlight .table-cell {
    -fx-background-color: rgba(0, 128, 0, 0.3);
}

.customhighlight .table-cell:selected {
    -fx-background-color: inherit;
}

How do I apply this to one column?

I tried

table.getStyleClass().add("customhighlight");

However, it changed the entire table.

I tried

tableCol.getStyleClass().add("customhighlight");

and it did nothing.

I also tried it at the cell level...

Slaw :

If I understand you correctly, you want:

• All the cells of a column to have a translucent background.
• Those cells, when selected, should look like the default modena.css selected look.
  • In other words, replace the translucent background with that darker-blue color and the text becomes white.

You should add a style class to the appropriate cells that you can then use in a CSS file. Here's a small example:

Main.java

import static java.util.stream.Collectors.collectingAndThen;
import static java.util.stream.Collectors.toCollection;

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.scene.Scene;
import javafx.scene.control.TableCell;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.stage.Stage;
import javafx.util.Pair;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) {
        var table = System.getProperties().stringPropertyNames().stream()
                .map(name -> new Pair<>(name, System.getProperty(name)))
                .collect(collectingAndThen(toCollection(FXCollections::observableArrayList), TableView::new));
        table.setColumnResizePolicy(TableView.CONSTRAINED_RESIZE_POLICY);
        table.getSelectionModel().setCellSelectionEnabled(true); // Not sure if you're using cell or row selection

        var keyCol = new TableColumn<Pair<String, String>, String>("Key");
        keyCol.setCellValueFactory(new PropertyValueFactory<>("key"));
        table.getColumns().add(keyCol);

        var valCol = new TableColumn<Pair<String, String>, String>("Value");
        valCol.setCellValueFactory(new PropertyValueFactory<>("value"));
        valCol.setCellFactory(tc -> new TableCell<>() {
            { getStyleClass().add("highlighted-table-cell"); }
            @Override protected void updateItem(String item, boolean empty) {
                super.updateItem(item, empty);
                if (empty || item == null) {
                    setText(null);
                } else {
                    setText(item);
                }
            }
        });
        table.getColumns().add(valCol);

        var scene = new Scene(table, 600, 400);
        scene.getStylesheets().add("Main.css");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

}

Main.css

.highlighted-table-cell {
    -fx-background-color: rgba(0, 128, 0, 0.3);
}

/* Needed by cell selection mode */
.highlighted-table-cell:selected {
    -fx-background-color: inherit;
}

/* Needed by row selection mode */
.table-row-cell:selected > .highlighted-table-cell {
    -fx-background-color: inherit;
}