Alignement du texte JavaFX TableView
Comme vous pouvez le voir sur l'image, l'alignement du texte pour chaque colonne est définie à l'alignement à gauche. Est-il possible de modifier cela? Jusqu'à présent, j'ai essayé dans mon fichier CSS:
#Cols{
text-align: right;
}
J'ai aussi essayé:
#Cols{
-fx-text-alignment: right;
}
Quelqu'un sait-il comment je peux changer l'alignement à droite?
6 answers
Alignement de toutes les colonnes du tableau:
À partir de JavaFX-8, vous pouvez utiliser le sélecteur CSS nouvellement défini table-column
,
#my-table .table-column {
-fx-alignment: CENTER-RIGHT;
}
Pour JavaFX-2, Pour ce faire, définissez un sélecteur 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;
}
Et définissez l'id du tableview.
tableView.setId("my-table");
Alignement de la colonne de table unique:
À partir de JavaFX-8, vous pouvez appliquer le style directement à TableColumn
,
firstTextCol.setStyle( "-fx-alignment: CENTER-RIGHT;");
Ou avec css,
firstTextCol.getStyleClass().add( "custom-align");
Où
.custom-align {
-fx-alignment: center-right;
}
Pour JavaFX-2,
Pour appliquer différents alignements à différentes colonnes, vous devez définir la fabrique de cellules pour cette colonne. Par exemple, supposons que la 1ère colonne de votre table doit être alignée vers la gauche tandis que les autres colonnes utilisent l'alignement par défaut de la table (CENTER-RIGHT
dans votre cas).
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;
}
});
Une solution rapide consiste à sélectionner la colonne dans le SceneBuilder et à ajouter simplement la propriété au champ style
Même cela a deux ans, voici une autre réponse. Pour chaque colonne de table existe une classe de style css par défaut .table-column
, donc si vous voulez changer les colonnes entières de la table pour justifier le centre droit, il suffit de le mettre dans une feuille de style ou un style en ligne:
.table-column {
-fx-alignment: CENTER_RIGHT;
}
Et si vous avez une colonne qui doit être alignée d'une autre manière, comme un en-tête de ligne, pas de problème du tout, attachez un id à cette colonne comme rowHeading et écrivez dans votre feuille de style ou style en ligne:
#rowHeading {
-fx-alignment: CENTER_LEFT;
}
Et il devrait être à gauche centré. Pas besoin de codage énorme.
J'ai utilisé
cell.setAlignment(Pos.CENTER_RIGHT);
Au Lieu de
cell.setStyle("-fx-alignment: CENTER-LEFT;");
Mais s'il y a du CSS pour cela, qui ne puis-je pas mettre fx:id sur une colonne, puis mettre l'alignement pour cela dans un fichier CSS? C'est beaucoup de code ci-dessus juste pour définir l'alignement des colonnes.
J'ai essayé cela et cela fonctionne
@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);
}
}
Ne pourrait pas être plus simple.
Pour une seule colonne (ou toute sélection)...
Déclarer une classe de style dans votre fxml
<TableColumn styleClass="centered-table-column" />
, Puis appliquer le css
.centered-table-column{
-fx-alignment: center;
}
, Ou pour toutes les colonnes
.table-column{
-fx-alignment: center;
}