Column标签下面的TableColumn.setGraphic

Question

当我使用以下代码向每列添加TextField时：

      tableColumn.setGraphic(textField);

文本字段位于标签的左侧，使列看起来像这样：

如果我拖出列宽，我看到标签仍在那里

有没有办法让Column使用它的原始标签，并将文本字段放在下面？ 我尝试将自己的标签与文本字段一起添加到VBox中，但随后您松开了自动宽度功能。

在James_D的回答之后，标签是正确的，但列式仍然有点奇怪？

MVCE：

public class TableViewTEST extends Application {

List<TableColumn> listOfColumns = new ArrayList();
TableView tableView = new TableView();


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


public void buildData() {

    TableColumn myColumn = new TableColumn("asd");
    TableColumn myColumn2 = new TableColumn("qq");
    listOfColumns.add(myColumn);
    listOfColumns.add(myColumn2);
    //add columns dynamically
    int counter = 0;
    for (TableColumn col : listOfColumns) {
        final int j = counter;

  col.setCellValueFactory(new Callback<TableColumn.CellDataFeatures<MyTableRow, String>, ObservableValue<String>>() {
            public ObservableValue<String> call(TableColumn.CellDataFeatures<MyTableRow, String> param) {
                return new SimpleStringProperty(param.getValue().rowData.get(j));

            }
        });

        counter++;
        TextField txtField = new TextField();
        VBox vbox = new VBox();
        vbox.getChildren().add(txtField);
        col.setGraphic(vbox);
        tableView.getColumns().add(col);

    }

    tableView.setRowFactory(tv -> {

        MyTableRow rowz = new MyTableRow();

        rowz.setOnMouseClicked(event -> {
            if (event.getClickCount() == 2 && (!rowz.isEmpty())) {

            }
        });

        return rowz;

    });

}

@Override
public void start(Stage stage) throws Exception {
    FlowPane flowpane = new FlowPane();
    flowpane.getChildren().add(tableView);

    buildData();
    Scene scene = new Scene(flowpane);

    scene.getStylesheets().add(TableViewTEST.class.getResource("css.css").toExternalForm());
    stage.setScene(scene);
    stage.show();

}

}

Answer 1

使用带有以下内容的外部css文件：

.table-column .label {
    -fx-content-display: bottom ;
}

这是一个完整的例子：

import java.util.List;

import javafx.application.Application;
import javafx.beans.property.ReadOnlyStringWrapper;
import javafx.scene.Scene;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.TextField;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

public class TableWithTextFieldColumnHeaders extends Application {

    @Override
    public void start(Stage primaryStage) {
        TableView<List<String>> table = new TableView<>();

        table.getColumns().add( createColumn("A", 0) );
        table.getColumns().add( createColumn("B", 1) );

        BorderPane root = new BorderPane(table);
        Scene scene = new Scene(root, 600, 400);
        scene.getStylesheets().add("table-text-field.css");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    private TableColumn<List<String>, String> createColumn(String title, int index) {

        TableColumn<List<String>, String> col = new TableColumn<>(title);

        col.setCellValueFactory(cellData -> 
            new ReadOnlyStringWrapper(cellData.getValue().get(index)));

        TextField textField = new TextField();
        col.setGraphic(textField);

        double textFieldPadding = 8 ;
        textField.prefWidthProperty().bind(
                col.widthProperty().subtract(textFieldPadding));

        return col ;
    }

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

使用css文件table-text-field.css：

.table-column .label {
    -fx-content-display: bottom ;
}