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?

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.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieve the individual character styles within an element using JavaScript

I'm currently dealing with a dynamically created div that features styled characters like: <div>Hello <b>J</b>oe</div> and my goal is to identify which characters are styled (in this case, the letter J). I've already atte ...

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

Currently, I am utilizing Spring-Data JPA and Spring-MVC in conjunction with a RESTful interface. My goal is to create a basic CRUD controller, and I am encountering some challenges while attempting to implement the "Update" functionality. My initial cont ...

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

Just getting started with Angular here. I’m working on a checkbox table that compares to another table and automatically checks if it exists. The functionality is all good, but as soon as I add ngModel to save the changes, the initial check seems to be ...

Tips for positioning the footer at the bottom of the page

During the process of constructing a new website, I included a footer that is neatly positioned at the bottom of my screen. https://i.sstatic.net/HgAbY.png However, I noticed that on pages with minimal content, the footer does not remain fixed at the bott ...

Tips for properly styling the input type range element

Is there a way to fix the issue with my input type="range" styling using linear-gradient when the variable is set to 75%? It seems to be behaving incorrectly. body{ background: green; } .wrapper { width: 20vmin; } input { widt ...

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

Greetings. I am working on creating a simple responsive HTML layout as described below: HTML: <div id="header"></div> <div id="content"></div> <div id="footer"></div> CSS: #header{ wi ...

Connection issue in Firefox: NotConnectedException

This is my current setup: java -version openjdk version "1.8.0_40-internal" OpenJDK Runtime Environment (build 1.8.0_40-internal-b27) OpenJDK 64-Bit Server VM (build 25.40-b25, mixed mode) ubuntu 14.04 clj-webdriver I am currently executing the foll ...

Hover animation using CSS is a great way to add interactivity

I'm trying to create an animation in a moving box that flips upside down when the mouse is raised. I've attempted to use keyframes and hover to achieve this effect, but it's not working as expected. Any suggestions on how to make it work? ...

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

When printing documents in Chrome browser, the table header (thead) does not appear on every page. I want to ensure that the table header is displayed on each printed page, just like it is done with IE and Firefox. However, Chrome does not support this fea ...

Updating the Scale of the Cursor Circle on my Portfolio Site

I attempted to find tutorials on creating a unique circle cursor that can hide the regular mouse cursor as well. After implementing it with a difference blend mode, I encountered an issue where I wanted the scale to change when hovering over a link. The ...

All hyperlinks are displayed as a single entity

I have 5 image links displayed side by side, but when I hover over them, they act as one collective link. Can someone please assist me with resolving this issue? After updating my code to include the entire div, it seems that there is something within the ...

Illustrating SVG links

I'm working on a basic svg animation project where I want to create a simple shape by animating a line under a menu link. The goal is to have a single line consisting of a total of 7 anchors, with the middle 3 anchors (each offset by 2) moving a few p ...

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

<html> <head> <title> Example </title> <style> img:hover {opacity : 0.3;} img {z-index : 1; height : 33%; width : 33%; } .first { position : absolute; top: 0%; left: 0%;} .second {position : absolute; top: 0%; left: 33%; ...

Alignment issues in buttons within Bootstrap

I'm facing an issue with the code snippet below <div className="row"> <div className="col-md-3"> <DateTimePickerComponent id="dateFrom" ...

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

Currently, my layout is as follows: https://jsfiddle.net/0r6cdwht/2/ Is there a way to enable horizontal scrolling when the items displayed inside the div overflow? I've done some research and came across a solution that suggested using white-spac ...

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

Currently experiencing an issue with the display of the footer in IE9. On some pages, the footer is not properly fixed and overlaps the middle of the content. However, this problem does not occur when using other web browsers. Here is the code that I am c ...

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

In my development setup, I have a global CSS file that houses all of the generic CSS styles. My goal is to extend the classes from this global CSS file in any of my SCSS files. However, when I attempt to do so, I encounter an error stating that the .xyz c ...

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

I am working on a Todo App and facing an issue where the scrollbars don't focus on the bottom of the page when adding a new element. How can this problem be resolved? https://i.stack.imgur.com/IzyUQ.png ...

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

What am I overlooking in my HTML and CSS coding to create a standard list dropdown in my navigation menu? When I preview this section of the page in Chrome and IE, the navigation area appears fine until I hover over the Fishing and Guides link. Instead of ...

The horizontal scrolling feature will not activate

I meticulously followed the instructions in a YouTube tutorial to implement this code. What's puzzling is that while the code works perfectly for the person in the video, allowing the grid items to scroll to the right, it doesn't have the same ef ...