How to change the background color of a non selected cell in JavaFx 8 table view

Tags: javafx,css-selectors,tableview

Problem :

I have a problem changing the background color of table cells in JavaFX8.

first the default css

applying the new style with

setStyle("-fx-alignment: CENTER-RIGHT; -fx-background-color: #FFD9D9;")

My question here is where did the horizontal border go?

It gets even worse when you select this line.

How can i change the white color in the cells to another without changing anything else?

Sample class (working correctly)

public class TableCellColorTest extends Application {

    private static final String[] COLUMN_HEADERS = new String[] { "2014", "2015", "2016", "2017", "2018" };
    private static final String[] COLUMN_STYLES = new String[] { "table-row-cell-2014", "table-row-cell-2015", "table-row-cell-2016", "table-row-cell-2017", "table-row-cell-2018" };

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

    @Override
    public void start(Stage primaryStage) throws Exception {

        Scene scene = new Scene(createContent(), 1000, 600);

        primaryStage.setScene(scene);
        primaryStage.show();
    }

    private Parent createContent() {

        ObservableList<String[]> data = FXCollections.observableArrayList();
        data.add(new String[] { "321.500,00 €", "262.500,00 €", "66.000,00 €", "0,00 €", "0,00 €" });
        data.add(new String[] { "", "", "", "", "", "", "" });
        data.add(new String[] { "321.500,00 €", "262.500,00 €", "66.000,00 €", "0,00 €", "0,00 €" });
        data.add(new String[] { "50.000,00 €", "100.000,00 €", "50.000,00 €", "0,00 €", "0,00 €" });

        TableView<String[]> table = new TableView<>(data);
        table.setPrefWidth(990);
        table.setColumnResizePolicy(TableView.CONSTRAINED_RESIZE_POLICY);

        table.getStylesheets().add("styles.css");

        for (int i = 0; i < 5; i++) {
            TableColumn<String[], String> col = new TableColumn<>(COLUMN_HEADERS[i]);
            final int _i = i;
            col.setCellValueFactory(cellData -> new ReadOnlyObjectWrapper(cellData.getValue()[_i]));

            // set color
            col.setCellFactory(cellData -> {
                return new TableCell<String[], String>() {
                    @Override
                    public void updateItem(String item, boolean empty) {
                        super.updateItem(item, empty);
                        setText(item);
                        if (!empty) {
                            getStyleClass().add(COLUMN_STYLES[_i]);
                        }

                    }
                };
            });

            table.getColumns().add(col);
        }

        FlowPane flowPane = new FlowPane(table);

        return flowPane;
    }
}

working Stylesheet

.table-row-cell-2014 {
    -fx-alignment: CENTER-RIGHT;
    -fx-background-color: #FFD9D9;
    -fx-background-insets: 0 0 1 0;
}

.table-row-cell:selected .table-row-cell-2014, .table-row-cell:selected .table-row-cell-2015,
    .table-row-cell:selected .table-row-cell-2016, .table-row-cell:selected .table-row-cell-2017,
    .table-row-cell:selected .table-row-cell-2018 {
    -fx-alignment: CENTER-RIGHT;
    -fx-background-color: null;
    -fx-background-insets: 0 0 1 0;
}

.table-row-cell-2015 {
    -fx-alignment: CENTER-RIGHT;
    -fx-background-color: #FFF5D9;
    -fx-background-insets: 0 0 1 0;
}

.table-row-cell-2016 {
    -fx-alignment: CENTER-RIGHT;
    -fx-background-color: #ECFFD9;
    -fx-background-insets: 0 0 1 0;
}

.table-row-cell-2017 {
    -fx-alignment: CENTER-RIGHT;
    -fx-background-color: #D9FFE2;
    -fx-background-insets: 0 0 1 0;
}

.table-row-cell-2018 {
    -fx-alignment: CENTER-RIGHT;
    -fx-background-color: #D9FFFF;
    -fx-background-insets: 0 0 1 0;
}

Result image

---

Solution :

You can fix the text color with

-fx-background-color: -fx-background; -fx-background: #FFD9D9;

instead of the background color setting you are currently using.

(Why? The default text color is a ladder - i.e. a color function - that depends on the value of the looked-up color fx-background. So if you change the value of -fx-background you automatically change the color of the text to something that contrasts with -fx-background. Then you just have to tell the cell to use the looked-up color -fx-background as its background color.)

The border comes from the table row, and your background is concealing it. You can fix that with

-fx-background-insets: 0 0 1 0 ;

So in total:

setStyle("-fx-alignment: CENTER-RIGHT; -fx-background-insets: 0 0 1 0 ;"
    +" -fx-background-color: -fx-background; -fx-background: #FFD9D9;")