Scrollbar on JavaFX table leaves a white space when using custom CSS

css, javafx, javafx-8

Solution

I finaly found how to solve it, Thanks @James_D for help me find the solution.

That corner is not part of the scroll-pane but the table.view header. So you can change the background with this code.

The padding is necessary cause it leaves a weird white line on the right without it.

.table-view .column-header-background .filler {
  -fx-background-color: rgba(1, 11, 12, 1);
  -fx-padding: 1em;
}

If you find a better way to achieve this please, your answer will be welcome.

Problem

A picture is worth a thousand words: . As you can see I'm using custom CSS on this table, but i cant fill the upper-right corner. I tried changing the background of the scroll-pane without result. Here's the actual CSS: ``` .table-row-cell { -fx-background-color: rgba(71, 81, 80,0.5); } .table-row-cell:hover { -fx-background-color: rgba(40, 96, 93, 0.50); } .table-row-cell:hover:empty { -fx-background-color: rgba(71, 81, 80,0.5); } .table-row-cell .table-cell { -fx-border-width: 0px; } .table-view { -fx-border-color: rgba(1, 11, 12, 1); -fx-background-radius: 2; -fx-border-width: 1px; -fx-border-radius: 2; -fx-background-color: rgba(71, 81, 80,0.2); -fx-background-insets: 0; } .table-view .column-header { -fx-background-color: rgba(1, 11, 12, 1); } .scroll-bar { -fx-background-color: rgba(1, 11, 12, 1); } .scroll-bar .increment-button:hover { -fx-background-color: rgba(1, 11, 12, 1); } .scroll-bar .decrement-button:hover { -fx-background-color: rgba(1, 11, 12, 1); } .scroll-bar .thumb { -fx-background-color: rgba(71, 81, 80,0.5); } ``` Any help will be very appreciated.

Original source