Set Row Height in JavaFX TableView

Question

How can I set row Height in JavaFX table View? I tried to increase it by using css but this didn't work:

.table-row{
    line-height: 50px;
}

Is there any other way to solve this?

Kado

Answer 1

You can use

.table-row-cell {
    -fx-cell-size: 50px;
}

The .table-row-cell is the class assigned to the table rows, as stated in capian.css, available at jfxrt.jar (com/sun/javafx/scene/control/skin/caspian/caspian.css):

Each row in the table is a table-row-cell. Inside a table-row-cell is any number of table-cell.

And -fx-cell-size, in this case, is the row height (actually, each cell height), as confirmed at Oracle's JavaFX CSS Reference Guide

-fx-cell-size: The cell size. For vertical ListView or a TreeView or TableView this is the height, for a horizontal ListView this is the width.

I tried the solution above on the following example:

PetsTable: (Note the use of scene.getStylesheets().add("styles/styles.css");, defining the css file to be employed)

import javafx.application.Application;
import javafx.beans.property.SimpleStringProperty;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.stage.Stage;

public class PetsTable extends Application {

    @SuppressWarnings({ "rawtypes", "unchecked" })
    @Override
    public void start(Stage stage) {
        Scene scene = new Scene(new Group());
        stage.setTitle("Pets");
        stage.setWidth(200);
        stage.setHeight(200);

        ObservableList<Pet> data = FXCollections.observableArrayList(new Pet("Kitty", "Susan"), 
                new Pet("Ploft", "Jackob"));
        TableView<Pet> table = new TableView<Pet>();

        TableColumn name = new TableColumn("Name");
        name.setMinWidth(100);
        name.setCellValueFactory(new PropertyValueFactory<Pet, String>("name"));

        TableColumn owner = new TableColumn("Owner");
        owner.setMinWidth(100);
        owner.setCellValueFactory(new PropertyValueFactory<Pet, String>("owner"));

        table.setItems(data);
        table.getColumns().addAll(name, owner);

        ((Group) scene.getRoot()).getChildren().addAll(table);

        /**********************************************/
        /********* Setting the css style file *******/
        /**********************************************/
        scene.getStylesheets().add("styles/styles.css");

        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }

    public static class Pet {

        private final SimpleStringProperty name;
        private final SimpleStringProperty owner;

        private Pet(String name, String owner) {
            this.name = new SimpleStringProperty(name);
            this.owner = new SimpleStringProperty(owner);
        }

        public String getName() {
            return name.get();
        }

        public String getOwner() {
            return owner.get();
        }
    }
}

styles.css:

.table-row-cell {
    -fx-cell-size: 50px;
}

Phratry

Hi. How are you setting the css file on your code? I updated my answer with an example. Did this example work on your computer? – Phratry

I'm using maven. I used this way to add stylesheet but still doesn't work on my project. can you give me a hint to solve this? – Kado

In the example, I put the CSS file at src/main/resources/styles/styles.css and added it to the scene using scene.getStylesheets().add("styles/styles.css"). In your case, where did you put the CSS file and how did you set it to the scene? – Phratry

I got this warning: WARNING: com.sun.javafx.css.StyleManager loadStylesheetUnPrivileged Resource "styles/styles.css" not found. – Kado

Ok. Where did you put the CSS file? – Phratry

under resources/styles – Kado

let us continue this discussion in chat – Phratry

Answer 2

Try this if you are using a listview!

.list-cell {
    -fx-cell-size: 250px;
}

Milstone

Answer 3

For a TableView in css (javaFX 17)

.table-view {
   -fx-fixed-cell-size : 24px;
}

Eileneeilis