Creating CSS style rules for aligning table column headers in JavaFXML

Question

Creating CSS style rules for aligning table column headers in JavaFXML

Is it possible to style columns individually in a tableview?

I have been attempting to make some column headers left-aligned and others right-aligned, as shown below:

| hdr1 | hdr2 | hdr3 | hdr4 |

In my css stylesheet, I experimented with the following code:

#colHeadingLeft .column-header{
  -fx-alignment: CENTER_LEFT;
}

#colHeadingRight .column-header{
  -fx-alignment: CENTER_RIGHT;
}

Despite setting id attributes for each column header tag in SceneBuilder using Java FX CSS, all headers end up being center aligned like this:

| hdr1 | hdr2 | hdr3 | hdr4 |

I have tried numerous solutions without success. Could it be that styling columns individually in a tableview is not supported?

java css javafx-8

Answer 1

Answer №1

To adjust the alignment of the child label within a column header, consider utilizing style classes for better control.

Below is an example using a ComboBox to select the alignment of a TableColumn column:

column.getStyleClass().add("center");

ComboBox<String> styleChoice = new ComboBox<>();
styleChoice.getItems().addAll("left", "center", "right");
styleChoice.valueProperty().addListener((o, oldValue, newValue) -> column.getStyleClass().set(column.getStyleClass().size() - 1, newValue));

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

.column-header.left .label {
    -fx-alignment: center-left;
}

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

The use of the combobox above demonstrates how to programmatically change alignment. You can also assign style classes directly to the TableColumns:

column1.getStyleClass().add("left");
column2.getStyleClass().add("left");
column3.getStyleClass().add("right");
column4.getStyleClass().add("right");

In this case, avoid using ids since the same style is applied to multiple columns, which would necessitate additional CSS selectors for each individual column.

Answer 2

To adjust the alignment of the child label within a column header, consider utilizing style classes for better control.

Below is an example using a ComboBox to select the alignment of a TableColumn column:

column.getStyleClass().add("center");

ComboBox<String> styleChoice = new ComboBox<>();
styleChoice.getItems().addAll("left", "center", "right");
styleChoice.valueProperty().addListener((o, oldValue, newValue) -> column.getStyleClass().set(column.getStyleClass().size() - 1, newValue));

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

.column-header.left .label {
    -fx-alignment: center-left;
}

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

The use of the combobox above demonstrates how to programmatically change alignment. You can also assign style classes directly to the TableColumns:

column1.getStyleClass().add("left");
column2.getStyleClass().add("left");
column3.getStyleClass().add("right");
column4.getStyleClass().add("right");

In this case, avoid using ids since the same style is applied to multiple columns, which would necessitate additional CSS selectors for each individual column.

Creating CSS style rules for aligning table column headers in JavaFXML

Answer №1

Similar questions

What is the best way to remove existing API requests in selenium?

Tips for updating sass import files as the body class changes

Positioning icon/image beside the input box

Using the swiper carousel on WordPress results in an unexpected horizontal scrolling issue

Are there specific mathematical algorithms that lend themselves well to creating responsive HTML designs?

When a container is styled with 'overflow-y: auto', it will display additional horizontal and vertical scrolling bars

Only referring to a CSS class within a particular element

Issue with Bootstrap tab display of content

Display a specific section of an image as the background in a div, with the image scaled and positioned perfectly

Utilizing Boolean Operators in JavaScript with Thymeleaf: A Guide

What is the best way to retrieve the size of a JSON object that is stored in the local project directory

Various results can be produced based on the .load() and .resize() or .scroll() functions despite using the same calculation methods

Utilizing WordPress' WTI Like Post Feature on Your Android Device

What is the proper way to manage errors before clicking a button in WebDriver?

Is there a way to retrieve an element based on its position within the webpage?

Populate the div with an image that stretches to the full height

The webpage failed to show the hamburger menu

Is there a unique shape element, such as a true circle, available in HTML5?

The Java for loop consistently evaluates to true

Choosing the Right Alignment for Your Selection Box