JavaFX tableview中水平网格线的消失

Question

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

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

由于在单元格工厂中，您将背景色设置为not null，这与默认边框重叠。所以解决方法很简单，你只需要设置底部边框的颜色：

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

}