Alignement du texte JavaFX TableView


entrez la description de l'image ici

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?

Author: messivanio, 2012-11-19

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");

.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;
            }
        });
 83
Author: Uluk Biy, 2015-04-16 06:34:00

Une solution rapide consiste à sélectionner la colonne dans le SceneBuilder et à ajouter simplement la propriété au champ style

entrez la description de l'image ici

 7
Author: sbjorng, 2018-05-20 04:59:49

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.

 6
Author: aw-think, 2015-03-13 16:46:14

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.

 4
Author: user2233433, 2013-04-01 19:51:22

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);
    }
}
 2
Author: Francis, 2014-07-29 17:56:57

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;
}

 0
Author: Alastair Cooper, 2020-11-26 02:46:10