JavaFX table columns have different fonts from CSS

I want to set different fonts (actually just italics) in a column of the JavaFX table

col.setCellFactory(TextFieldTableCell.<TableRow>forTableColumn());

So my question is – does anyone try to set an ID or style class on a column and reference it in CSS?

My attempt is like this (try class and ID):

col.getStyleClass().add(colDef.isItalic()? "italic-cell" : null);
col.setId(colDef.isItalic()? "italic-cell" : null);

Then use some combinations

#italic-cell
.italic-cell
#special-table .italic-cell

wait

-fx-font-style: italic;

Style as ID / class

Solution

CSS styles for tables

Add the appropriate style class to the column:

nameColumn.getStyleClass().add("italic");

Add a style sheet in the scene to define the italic style of table cells:

.italic.table-cell { -fx-font-style: italic; }

Warning 1

I tried this example again according to t-and-m Mike's comments. In fact, it doesn't work properly on OS X 10.9 using java 8 I believe that on windows, just set - FX font style to italic and display it in italics On the Mac, this sets the font to system italic, a font that doesn't seem to exist, so the text is only displayed without italics If you also set the font family to some fonts that define italics, the text in the column will appear in italics as expected For example, use Times New Roman, italic:

.italic.table-cell { 
  -fx-font-family: "Times New Roman"; 
  -fx-font-style: italic; 
}

Warning 2

On Java 8b132 on OS X 10.9, when the table content is slightly inconsistent with the table title, a slight rendering error will appear when the table is displayed for the first time

Call table requestLayout(); After the table is displayed on the screen, it seems to fix the alignment rendering error of the table, but if everything is normal, there is no need to call

Executable sample

Test output results on win7 Java 8b91:

CellShadedTable. java

import javafx.application.Application;
import javafx.scene.*;
import javafx.scene.control.*;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.stage.Stage;

// demonstrates styling column cells in a tableview.
public class CellShadedTable extends Application {
  public static void main(String[] args) throws Exception { launch(args); }
  @Override public void start(final Stage stage) throws Exception {
    stage.setTitle("So called friends . . .");

    // create a table.
    TableColumn<Friend,String> nameColumn = new TableColumn<>("Name");
    nameColumn.setCellValueFactory(new PropertyValueFactory<Friend,String>("name"));
    nameColumn.setPrefWidth(75);
    nameColumn.getStyleClass().add("italic");

    TableColumn<Friend,String> owesMeColumn = new TableColumn<>("Owes Me");
    owesMeColumn.setCellValueFactory(new PropertyValueFactory<Friend,String>("owesMe"));
    owesMeColumn.setPrefWidth(150);

    TableColumn<Friend,Boolean> willPayColumn = new TableColumn<>("Will Pay Up");
    willPayColumn.setCellValueFactory(new PropertyValueFactory<Friend,Boolean>("willPay"));
    willPayColumn.setPrefWidth(75);

    TableView<Friend> table = new TableView(Friend.data);
    table.getColumns().addAll(
      nameColumn,owesMeColumn,willPayColumn
    );
    table.setPrefHeight(200);
    table.setColumnResizePolicy(TableView.CONSTRAINED_RESIZE_POLICY);

    stage.setScene(new Scene(table));
    stage.getScene().getStylesheets().add(getClass().getResource("cell-shader.css").toExternalForm());
    stage.show();

    table.requestLayout();
  }
}

Friend. java

import javafx.collections.*;

/** Sample data for a table view */
public class Friend {
  final static public ObservableList data = FXCollections.observableArrayList(
    new Friend("George","Movie Ticket",true),new Friend("Irene","Pay Raise",false),new Friend("Ralph","Return my Douglas Adams Books",new Friend("Otto","Game of Golf",new Friend("Sally","$12,045.98",new Friend("Antoine","Latte",true)
  );

  final private String  name;
  final private String  owesMe;
  final private boolean willPay;
  public Friend(String name,String owesMe,boolean willPay) {
    this.name = name; this.owesMe = owesMe; this.willPay = willPay;
  }
  public String  getName()    { return name;    }
  public String  getOwesMe()  { return owesMe;  }
  public boolean getWillPay() { return willPay; }
}

Cell shader css

/** file: cell-shader.css
place in same directory as CellShadedTable.java */

.italic.table-cell { 
  -fx-font-family: "Times New Roman";
  -fx-font-style: italic; 
}

Cell factory based method

For reference (and as shown above, it is not necessary for simple style operations), information about the row coloring method based on custom TableCell is in:

> Updating TableView row appearance > Background with 2 colors in JavaFX?