css - 使用自定义 CSS 时，JavaFX 表上的滚动条会留下空白

Question

一图胜千言:

.

如您所见，我在此表上使用了自定义 CSS，但无法填充右上角。我尝试更改滚动 Pane 的背景，但没有结果。

这是实际的 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);
}

任何帮助将不胜感激。

Answer 1

我终于找到了解决方法，感谢@James_D 帮助我找到解决方案。

那个 Angular 不是滚动 Pane 的一部分，而是 table.view 标题的一部分。所以你可以用这段代码改变背景。

填充是必要的，因为如果没有填充，它会在右侧留下一条奇怪的白线。

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

如果您找到更好的方法来实现这一点，欢迎您的回答。