Search code examples
javajavafxjavafx-css

How to set background-color for selected but not focused table row using CSS?

This is my code:

public class JavaFxTest7 extends Application {

    private static class Student {

        private int id;

        private int mark;

        public Student(int id, int mark) {
            this.id = id;
            this.mark = mark;
        }

        public int getId() {
            return id;
        }

        public int getMark() {
            return mark;
        }
    }

    private TableView<Student> table = new TableView<>(FXCollections.observableList(
            List.of(new Student(1, 3), new Student(2, 4), new Student(3, 5))));

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) {
        var idColumn = new TableColumn<Student, Integer>();
        idColumn.setCellValueFactory((data) ->  new ReadOnlyObjectWrapper<>(data.getValue().getId()));
        var markColumn = new TableColumn<Student, Integer>();
        markColumn.setCellValueFactory((data) ->  new ReadOnlyObjectWrapper<>(data.getValue().getMark()));
        table.getColumns().addAll(idColumn, markColumn);

        VBox root = new VBox(new TextField(), table);
        var scene = new Scene(root, 400, 300);
        var css= this.getClass().getResource("test7.css").toExternalForm();

        scene.getStylesheets().addAll(css);
        primaryStage.setScene(scene);
        primaryStage.show();
    }
}

And I need to set yellow as a background-color for selected, but not focused table-row. And green as a background-color for focused table-row. I tried :

.table-row-cell:selected:focused {
    -fx-background-color: green;
    -fx-background-insets: 0;
}

.table-row-cell:selected {
    -fx-background-color: yellow;
    -fx-background-insets: 0;
}

but it gave this result:

enter image description here

and this code:

.table-row-cell:focused {
    -fx-background-color: green;
    -fx-background-insets: 0;
}

.table-row-cell:selected {
    -fx-background-color: yellow;
    -fx-background-insets: 0;
}

gave this result:

enter image description here

Could anyone say how to do that?

Solution

  • The CSS rules for selected table rows and cells are quite complicated. In the default style sheet they are defined as follows:

    /* Selected rows */
.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:selected,
.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell .table-cell:selected {
    -fx-background: -fx-selection-bar;
    -fx-table-cell-border-color: derive(-fx-selection-bar, 20%);
}

/* Selected when control is not focused */
.table-row-cell:filled:selected,
.table-row-cell:filled > .table-cell:selected {
    -fx-background: -fx-selection-bar-non-focused;
    -fx-table-cell-border-color: derive(-fx-selection-bar-non-focused, 20%);
}

/* focused cell (keyboard navigation) */
.table-view:focused:row-selection > .virtual-flow > .clipped-container > .sheet > .table-row-cell:focused,
.table-view:focused:cell-selection > .virtual-flow > .clipped-container > .sheet > .table-row-cell > .table-cell:focused {
    -fx-background-color: -fx-background, -fx-cell-focus-inner-border, -fx-background;
    -fx-background-insets: 0, 1, 2;
}

/***** ROW CELLS **************************************************************/
/* Each row in the table is a table-row-cell. Inside a table-row-cell is any
   number of table-cell. */
.table-row-cell {
    -fx-background: -fx-control-inner-background;
    -fx-background-color: -fx-table-cell-border-color, -fx-background;
    -fx-background-insets: 0, 0 0 1 0;
    -fx-padding: 0;
    -fx-text-fill: -fx-text-background-color;
}
.table-row-cell:odd {
    -fx-background: -fx-control-inner-background-alt;
}

/***** INDIVIDUAL CELLS ********************************************************/
.table-cell {
    -fx-padding: 0.166667em; /* 2px, plus border adds 1px */
    -fx-background-color: null;
    -fx-border-color: transparent -fx-table-cell-border-color transparent transparent;
    -fx-cell-size: 2.0em; /* 24 */
    -fx-text-fill: -fx-text-background-color;
}
.table-view > .virtual-flow > .clipped-container > .sheet > .table-row-cell .table-cell:selected {
    -fx-background-color: -fx-table-cell-border-color, -fx-background;
    -fx-background-insets: 0, 0 0 1 0;
}

    In a nutshell, the fx-background-color for rows is set to a looked-up color called -fx-background (with a border which is implemented by a nested background). The -fx-background-color for the non-selectedindividual cells in a row is sent to null, (transparent) so you see the background of the row, and for selected individual cells is set to -fx-background.

    When the row is selected and focused, the looked up color -fx-background is set for both the rows and individual cells to another looked-up color called -fx-selection-bar, and when the row is selected but not focused, -fx-background is set, again for both rows and cells, to -fx-selection-bar-non-focused.

    I can't quite explain the exact behavior you observe, but the simplest way to achieve what you want is to set the looked-up colors used for selection:

    .table-view {
    -fx-selection-bar: green;
    -fx-selection-bar-non-focused: yellow;
}