How to style Java FX TableView column header using CSS

16,014

I would recommend to try something with the following style classes:

.table-view .column-header-background

I changed my column header background with this css and it worked:

.table-view .column-header,
.table-view .column-header .filler,
.table-view .column-header-background .filler {
    -fx-background-color: red;
}

Are you sure that you dont have a treetable? Because the styling class is named tree-table-view instead of table-view.

Share:
16,014
Skylar
Author by

Skylar

Updated on June 14, 2022

Comments

  • Skylar
    Skylar almost 2 years

    I am rather new to JavaFX and CSS styling (and also stackoverflow). I am wondering how can one style the table header of the column. This is what my header looks like currently: Current styling of my table view column header

    This is what I want it to look like: Styling I want to implement

    I have tried applying the following css styling without avail:

    .table-view .column-header .nested-column-header
    {
        -fx-background-color: #AAAAAA;
        -fx-background-radius: 0;
        -fx-background-insets: 0;
        -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.6), 2, 0.5, 1, 1);
    }
    
    .table-view .column-header
    {
        -fx-background-color: #AAAAAA;
        -fx-background-radius: 0;
        -fx-background-insets: 0;
        -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.6), 2, 0.5, 1, 1);
    }
    
    .table-view .column-header .filter
    {
        -fx-background-color: #AAAAAA;
        -fx-background-radius: 0;
        -fx-background-insets: 0;
        -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.6), 2, 0.5, 1, 1);
    }
    

    I also checked out the caspian.css file found in the jfxrt.jar but that could not point me in the right direction.

    So if anyone has any ideas, it would be great. :) Thank you in advance.