java - JavaFX TableView text alignment

Question

As you can see on the picture the text alignment for each colum is set to left alignment. Is there any way to change this? So far I've tried within my CSS file:

#Cols{
    text-align: right;
}

I have also tried:

#Cols{
    -fx-text-alignment: right;
}

Does anyone know how I can change the alignment to right?

Answer 1

所有表格列的对齐方式：

从 JavaFX-8 开始，您可以使用新定义的 CSS 选择器table-column，

#my-table .table-column {
  -fx-alignment: CENTER-RIGHT;
}

对于 JavaFX-2，要实现这一点，请定义一个 CSS 选择器：

#my-table .table-cell {
    -fx-alignment: CENTER-RIGHT;
     /* The rest is from caspian.css */

    -fx-skin: "com.sun.javafx.scene.control.skin.TableCellSkin";
    -fx-padding: 0.166667em; /* 2px, plus border adds 1px */

    -fx-background-color: transparent;
    -fx-border-color: transparent -fx-table-cell-border-color transparent transparent;
    -fx-border-width: 0.083333em; /* 1 */
    -fx-cell-size: 2.0em; /* 24 */
    -fx-text-fill: -fx-text-inner-color;
}

并设置tableview的 id 。

tableView.setId("my-table");

单表列对齐：

从 JavaFX-8 开始，您可以直接将样式应用于TableColumn,

firstTextCol.setStyle( "-fx-alignment: CENTER-RIGHT;");

或使用 css，

firstTextCol.getStyleClass().add( "custom-align");

在哪里

.custom-align { 
  -fx-alignment: center-right; 
} 

对于 JavaFX-2，
要将不同的对齐方式应用于不同的列，您需要为该列设置单元工厂。例如，假设表中的第一列应左对齐，而其他列使用表的默认对齐方式（CENTER-RIGHT在您的情况下）。

firstTextCol.setCellFactory(new Callback<TableColumn, TableCell>() {
            public TableCell call(TableColumn p) {
                TableCell cell = new TableCell<Person, String>() {
                    @Override
                    public void updateItem(String item, boolean empty) {
                        super.updateItem(item, empty);
                        setText(empty ? null : getString());
                        setGraphic(null);
                    }

                    private String getString() {
                        return getItem() == null ? "" : getItem().toString();
                    }
                };

                cell.setStyle("-fx-alignment: CENTER-LEFT;");
                return cell;
            }
        });

Answer 2

一个快速的解决方法是在 SceneBuilder 中选择列，然后将属性添加到样式字段

Answer 3

即使这已经两年了，这里还有另一个答案。对于每个表格列都存在一个默认的 css 样式类.table-column，因此如果您想更改整个表格列以对齐居右，只需将其放入样式表或内联样式中：

.table-column {
  -fx-alignment: CENTER_RIGHT;
}

如果您有一个应该以其他方式对齐的列，例如行标题，完全没有问题，请在该列上附加一个 id，例如 rowHeading 并在您的样式表或内联样式中写入：

#rowHeading {
  -fx-alignment: CENTER_LEFT;
}

它应该居中。无需大量编码。

Answer 4

我用了

cell.setAlignment(Pos.CENTER_RIGHT);

代替

cell.setStyle("-fx-alignment: CENTER-LEFT;");

但是如果有这方面的 CSS，我不能把 fx:id 放在一个列上，然后把它的对齐放在一个 CSS 文件中吗？上面有很多代码只是为了设置列对齐。

Answer 5

我试过了，它有效

@FXML private TableColumn<BookingData,String>colClientMobile;

//Some code
colClientMobile.setCellFactory(new Callback<TableColumn<BookingData, String>, TableCell<BookingData, String>>() {
        @Override
        public TableCell<BookingData, String> call(TableColumn<BookingData, String> param) {
            return new TableCellFormat();
        }
    });

private class TableCellFormat extends TableCell<BookingData, String>{
    @Override
    protected void updateItem(String item, boolean empty) {
        super.updateItem(item, empty); 
        this.setText(item);
        this.setAlignment(Pos.CENTER_RIGHT);
    }
}

Answer 6

再简单不过了。

对于单个列（或任何选择）...

在你的 fxml 中声明一个 styleClass

<TableColumn  styleClass="centered-table-column" />

然后应用css

.centered-table-column{
    -fx-alignment: center;
}

或所有列

.table-column{
    -fx-alignment: center;
}