Disappearing horizontal grid lines in JavaFX tableview

Question

I have a tableview which stores data, and works just fine except I can't seem to get the horizontal gridlines to be visible. I've tried what was suggested here and it's not working for me. I've looked around and haven't been able to find any other suggestions for this issue.

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

Cell Factory:

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

Table creation:

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

Thanks in advance!

Do you want just the horizontal grid lines visible, or all grid lines? — James_D, Nov 17 '14 at 14:33

José Pereda · Accepted Answer · 2014-11-17T17:49:21.743

By default, a cell has this styling:

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

By default, the only border with color is the right one (black).

Since in your cell factory you are setting the background color to not null, this is overlapping the default border. So the solution is easy, you just need to set the color for the bottom border too:

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

}

Worked! Do you know of any good tutorials on css in javafx, or a reference I could look at? — Risky_91, Nov 17 '14 at 17:49
The best place to look at is the official [reference](https://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html). Then, the next place is `modena.css` file that is bundled within jfxrt.jar in the JDK. — José Pereda, Nov 17 '14 at 17:52
You can also view [`modena.css` in the source repository](http://hg.openjdk.java.net/openjfx/8/master/rt/file/f89b7dc932af/modules/controls/src/main/resources/com/sun/javafx/scene/control/skin/modena/modena.css) if you don't want to mess with extracting it from the jar file. — James_D, Nov 17 '14 at 18:09

Disappearing horizontal grid lines in JavaFX tableview

1 Answers1