JavaFx how to align only one column-header in tableview?

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
}

Venusberg

Answer 1

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.

Raeraeann

Yes, for reasons that are beyond me they changed it in Java 8 :/ But I've edited my answer with a proper solution for Java 8. – Raeraeann

Answer 2

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

Coercion

Answer 3

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

Widow

Answer 4

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

}

Day