Question

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

Answer 1

您可以使用

修复文字颜色

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

而不是您当前使用的背景颜色设置。

（为什么？默认文本颜色是梯形图 - 即颜色函数 - 取决于查找颜色fx-background的值。所以，如果你自动更改-fx-background的值将文本的颜色更改为与-fx-background形成对比的内容。然后，您只需告诉单元格使用查找颜色-fx-background作为其背景颜色。）

边框来自表格行，您的背景隐藏了它。你可以用

解决这个问题

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

所以总的来说：

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

Answer 2

您可以在styles.css文件中添加这两行来修复它。

.table-row-cell:selected .text {
       -fx-fill: blue ;
}

.table-row-cell{
    -fx-border-color:#d3d3d3;
}

我希望它能帮到你..

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

2 个答案: