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 enter image description here

applying the new style with

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

enter image description here

My question here is where did the horizontal border go?

It gets even worse when you select this line. enter image description here

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 enter image description here



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;")

    CSS Howto..

    Border positioning: how to?

    How to select the by CSS?

    How to only change left padding in javafx css

    How to centre text as CSS content attribute vertically and horizontally?

    How to change or disable the alternating background colors in Google Prettify

    How to add a color overlay to a background image?

    How to make IE support min-width / max-width CSS properties?

    How to apply css on one html file only

    How do I move a list's bullet point to the right side of the text?

    How can I override inline styles with external CSS?

    Why will show() only work for fields that are hidden using inline css?

    CSS - How can you apply Border Shadow Inset only to 2 sides?

    HTML CSS how to adapt text on a Div's size [closed]

    CSS stacking order - how to get this right?

    How to draw with CSS canvas a slideshow frame?

    How to change this script into

    How to adapt a flex div's width to content

    Logo not showing on top of header img

    how to apply two kind of css to one control, one for internet explorer, another for firefox and chrome

    How to set outline without using CSS outline property?

    How do I light up an entire single row by hovering on a span in one of the columns?

    Formatting text, Suggestions with how-to?

    How to keep sub div from considering height of its cousin?

    How to make a transition in height without knowing the height before?

    How can I give the current page's link a disabled look?

    How do I change the background on mouse over immediately?

    How to create a fluidic list using css

    How to strike through obliquely with css

    How to make AngularJS Materials drop down menues more visable?

    How do I change the text inside a button?