如何在JavaFX中使用CSS设置TableView列宽？

问题重现 #

以下是测试代码：

public class JavaFxTest7 extends Application {

    private static class Student {

        private int id;
        private int mark;

        public Student(int id, int mark) {
            this.id = id;
            this.mark = mark;
        }

        public int getId() {
            return id;
        }

        public int getMark() {
            return mark;
        }
    }

    private TableView<Student> table = new TableView<>(FXCollections.observableList(
            List.of(new Student(1, 3), new Student(2, 4), new Student(3, 5))));

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

    @Override
    public void start(Stage primaryStage) {
        var idColumn = new TableColumn<Student, Integer>();
        idColumn.setCellValueFactory(data -> new ReadOnlyObjectWrapper<>(data.getValue().getId()));
        
        var markColumn = new TableColumn<Student, Integer>();
        markColumn.setCellValueFactory(data -> new ReadOnlyObjectWrapper<>(data.getValue().getMark()));
        
        // Java代码设置列宽生效
        // markColumn.setMaxWidth(200);
        // markColumn.setMinWidth(200);
        
        // 直接CSS设置无效
        markColumn.setStyle("-fx-min-width: 200; -fx-max-width: 200;");
        
        table.getColumns().addAll(idColumn, markColumn);

        VBox root = new VBox(table);
        var scene = new Scene(root, 400, 300);
        primaryStage.setScene(scene);
        primaryStage.show();
    }
}

使用Java代码setMaxWidth和setMinWidth时，列宽能被固定为200；但直接用内联CSS设置-fx-min-width和-fx-max-width时，无法达到预期的固定宽度效果。

原因分析 #

TableColumn的minWidth、maxWidth属于模型层属性，直接通过setStyle设置的CSS样式默认作用于其对应的UI组件（如表头单元格），并非直接修改模型层的宽度属性，因此无法固定列宽。

正确解决方法 #

方法1：内联CSS同时设置首选宽度与宽限

修改内联样式，同时指定-fx-pref-width并将三个宽度值设为一致：

markColumn.setStyle("-fx-pref-width: 200; -fx-min-width: 200; -fx-max-width: 200;");

-fx-pref-width设置列的首选宽度，配合min和max的限制，就能实现固定宽度效果。

方法2：使用外部CSS文件（推荐）

1. 创建CSS文件（如table-style.css），添加样式：

.table-column.mark-fixed-width {
    -fx-pref-width: 200;
    -fx-min-width: 200;
    -fx-max-width: 200;
}

2. 在Java代码中加载CSS并给目标列添加样式类：

// 加载CSS文件
scene.getStylesheets().add(getClass().getResource("table-style.css").toExternalForm());
// 给列绑定样式类
markColumn.getStyleClass().add("mark-fixed-width");

这种方式更适合多列或复杂样式场景，便于统一维护。

方法3：禁用列调整（可选）

如果需要完全禁止用户手动调整列宽，可额外添加：

markColumn.setResizable(false);

结合上述CSS设置，能彻底固定列宽。

内容的提问来源于stack exchange，提问作者user5182503