JavaFX TableView中消失的水平网格线

Question

我有一个存储数据的tableview，并且工作正常，只是我似乎看不到水平网格线。 我已经尝试过这里提出的建议，但对我却没有用。 我已经环顾四周，但无法找到其他有关此问题的建议。

CSS：

.column-header-background { 
visibility: hidden; -fx-padding: -1em; 
}

.table-view {
-fx-table-cell-border-color: black;
} 

.table-view .table-row-cell {
-fx-border-width: 1;
}

电池厂：

public class StitchCell extends TableCell<ObservableList<Stitch>, Color> {

@Override 
protected void updateItem(Color color, boolean empty) {
    super.updateItem(color, empty);

    int r = (int) (color.getRed() * 255);
    int g = (int) (color.getGreen() * 255);
    int b = (int) (color.getBlue() * 255);


    if (empty || color == null) {
        this.setStyle("-fx-background-color: white");
    } else {
        this.setStyle("-fx-background-color: rgb(" + r + "," + g + "," + b + ")");
    }
}
}

表创建：

protected TableView<ObservableList<Stitch>> call() throws Exception {
    pattern.setItems(stitchList);

    for (ObservableList<Stitch> row : stitchList) {

        for (int i= pattern.getColumns().size(); i<row.size(); i++){
            TableColumn<ObservableList<Stitch>, Color> column = new TableColumn<>();
            final int columnIndex = i ;
            column.setCellValueFactory( rowData -> 
                rowData.getValue() // the row value, i.e. an ObservableList<Stitch>
                    .get(columnIndex) // the Stitch for this cell
                    .getDisplayColorProperty() );

            column.setCellFactory(col -> new StitchCell());
            column.setEditable(true);
            column.setMinWidth(5);
            column.setPrefWidth(5);
            column.setMaxWidth(5);
            pattern.getColumns().add(column);
        }
    }
    pattern.setFixedCellSize(5);
    pattern.setColumnResizePolicy(TableView.CONSTRAINED_RESIZE_POLICY);
    pattern.getSelectionModel().setCellSelectionEnabled(true);


    return pattern;
} // End Call

提前致谢！

Answer 1

默认情况下，单元格具有以下样式：

.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;
}

默认情况下，唯一带有颜色的边框是右边的边框（黑色）。

由于在单元工厂中，您将背景色设置为不为空，因此这与默认边框重叠。 因此解决方案很简单，您也只需设置底部边框的颜色即可：

@Override 
protected void updateItem(Color color, boolean empty) {
    super.updateItem(color, empty);

    int r = (int) (color.getRed() * 255);
    int g = (int) (color.getGreen() * 255);
    int b = (int) (color.getBlue() * 255);

    if (empty || color == null) {
        this.setStyle("-fx-background-color: white; "
             + "-fx-border-color: transparent -fx-table-cell-border-color -fx-table-cell-border-color transparent;");
    } else {
        this.setStyle("-fx-background-color: rgb(" + r + "," + g + "," + b + ");" 
             + "-fx-border-color: transparent -fx-table-cell-border-color -fx-table-cell-border-color transparent;");
    }

}