在 CSS (JavaFX) 中設置 TableView 樣式

Question

如何在 TableView 中設置“THIS”點的樣式？

我的 CSS 代碼如下所示：

   */*
 * Empty Stylesheet file.
 */

.root{
    -fx-background-color: #262626;
}

.table-view{
   -fx-background-color: transparent;
}

.table-view:focused{
    -fx-background-color: transparent;
}

/* Spaltenköpfe
    Struktur column-header-background -> column-header */

.table-view .column-header-background{
    -fx-background-color: linear-gradient(#131313 0%, #424141 100%);
}

.table-view .column-header-background .label{
    -fx-background-color: transparent;
    -fx-text-fill: white;
}

.table-view .column-header {
    -fx-background-color: transparent;
}

.table-view .table-cell{
    -fx-text-fill: white;
}

.table-row-cell{
    -fx-background-color: -fx-table-cell-border-color, #616161;
    -fx-background-insets: 0, 0 0 1 0;
    -fx-padding: 0.0em; /* 0 */
}

.table-row-cell:odd{
    -fx-background-color: -fx-table-cell-border-color, #424242;
    -fx-background-insets: 0, 0 0 1 0;
    -fx-padding: 0.0em; /* 0 */  
}

.table-row-cell:selected {
    -fx-background-color: #005797;
    -fx-background-insets: 0;
    -fx-background-radius: 1;
}

.table-view > .virtual-flow > .scroll-bar:vertical,
.table-view > .virtual-flow > .scroll-bar:vertical > .track,
.table-view > .virtual-flow > .scroll-bar:vertical > .track-background, 
.table-view > .virtual-flow > .scroll-bar:horizontal,
.table-view > .virtual-flow > .scroll-bar:horizontal > .track,
.table-view > .virtual-flow > .scroll-bar:horizontal > .track-background {
    -fx-background-color: transparent;
}



.table-view > .virtual-flow > .scroll-bar > .increment-button, 
.table-view > .virtual-flow > .scroll-bar > .decrement-button {
    -fx-opacity: 0;
}*

正如你所看到的，我已經改變了 colum-header-background 和所有類似的東西。 我也#ve 改變了TableView 的背景。 所以我真的不知道我到底應該在我的 CSS 中改變什么。 感謝您的每一個幫助！ :)

-GhostfaceChilla-

Answer 1

.table-view .filler是您正在尋找的選擇器。 風景視圖工具非常適合分析組件。

Answer 2

.table-view{
   -fx-background-color: transparent;
}

如果 TableView 中沒有記錄，背景顏色可以是白色。 可能很高興為占位符設置樣式

Answer 3

如果有人來這里搜索 column-show-hide 按鈕的 CSS，這里是 CSS。

.table-view .show-hide-columns-button {
    -fx-background-color: red;
    -fx-border-color: -fx-box-border;
    -fx-border-insets: -1 -1 0 0;
}

Answer 4

我設法用這個 CSS 代碼解決了這個問題：

.table-view .filler {
    -fx-border-insets: 10 //Enter value depending on thickness;
}

Answer 5

嘗試這個

.table-view .filler{
    -fx-background-color: transparent;
}

Answer 6

嘗試這個。

.table-view .column-header-background
{
    -fx-background-color: transparent;
}