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

Retrieve the individual character styles within an element using JavaScript

Is it possible to effortlessly modify a Spring-Data object using Spring MVC and JSON in a straightforward manner?

The Angular checked functionality is not working as expected due to the presence of ngModel

Tips for positioning the footer at the bottom of the page

Tips for properly styling the input type range element

Creating a Sticky Header and Footer with Responsive Design: Ensuring Content Div Expansion between Them

Connection issue in Firefox: NotConnectedException

Hover animation using CSS is a great way to add interactivity

Is there a way to ensure that the table headers are printed on every page when using Google Chrome

Updating the Scale of the Cursor Circle on my Portfolio Site

All hyperlinks are displayed as a single entity

Illustrating SVG links

Is there a way to ensure that the text stays positioned behind the initial image even as the window size is adjusted

Alignment issues in buttons within Bootstrap

Show inline-block elements within a div that has a variable width, allowing for horizontal scrolling

On certain websites, the footer may appear distorted or incorrectly displayed when viewed in the IE 9 web browser

Utilize Sass @extend to incorporate imported CSS files in the build process

Tips for effectively utilizing the overflow:auto property to maintain focus on the final

What's the key ingredient I need to add for a dropdown navigation menu?

The horizontal scrolling feature will not activate