Question

How to align title of only one column in tableview?
The following css aligns all column-header but I want to align just one column:

.table-view .column-header .label{
    -fx-alignment:CENTER
}
Was it helpful?

Solution

You can do that now with recent versions of JavaFX.

Java 1.7

This worked for me with Java: 1.7.0_45 / JavaFX: 2.2.45-b18). It should be a recent version because it requires RT-14909

The column-header will automatically get the same "Id" as the TableColumn! Therefore your TableColumn(s) need an (CSS-) Id that you can either set in Scenebuilder for the TableColumn directly or use some code like tableColumn.setId("my-special-column").

Then you can style the column-header directly using the Id:

.table-view .column-header#my-special-column .label {
  -fx-alignment: CENTER_RIGHT;
  -fx-text-fill: red;
}

PS: This took me some frustrating 1,5 hours to figure out. Hope this helps others now!

Java 8

For reasons that I don't understand the id trick does not work for Java 8 anymore. However, what we can do is to set a styleClass for the column directly (which internally is propagated to the TableColumnHeader) and change this styleClass in the css file:

In Java:

firstNameCol.getStyleClass().add("my-special-column-style");

And in CSS:

.my-special-column-style .label {
  -fx-alignment: CENTER_RIGHT;
  -fx-text-fill: red;
}

Works for me here with jdk1.8.0_05 on Mac OS X.

OTHER TIPS

I stuggled with this myself, but found this solution. This will right align a single column whereas the rest of the columns in the same table are left aligned:

In code:

myCol.getStyleClass().add("rightAlignedTableColumnHeader");

In CSS:

.column-header.rightAlignedTableColumnHeader > .label {
    -fx-alignment: center-right;
}

@DOM @void256 for what it is worth I tried your code and it works fine. I also tried this code and it works what the puzzle is I had to use top-left as the CENTER_RIGHT would not work. I am using jre 1.8.0_45 with eclipse luna The other strange issue is if you set this in Scene Builder it does not work on the header text but on the column text

public void initialize(URL arg0, ResourceBundle arg1) {
    firstNameColumn.getStyleClass().add("top-left");
    lastNameColumn.getStyleClass().add("any-this-works-here;");
    phoneNumberColumn.getStyleClass().add("top-left;");
    emailAddressColumn.getStyleClass().add("top-left;");
}


.table-view .column-header .label{
    -fx-font-size: 12pt;
    -fx-text-fill: blue;
    -fx-alignment:top-left;

}

None of these solutions worked for me (not sure why). I am using jdk1.8.0_66 on Windows.

This is a bit of a hack, but it works:

// Hack: align column headers to the center.  
table.widthProperty().addListener((src, o, n) -> Platform.runLater(() -> {
  if (o != null && o.intValue() > 0) return; // already aligned
  for (Node node: table.lookupAll(".column-header > .label")) {
    if (node instanceof Label) ((Label)node).setAlignment(Pos.CENTER);
  }    
}));
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top