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

Question

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.

Answer 1

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.