2012-10-05 13 views
5

私はテーブルビューを持っていると私は...
1. ...行の上に置く場合は、行のデフォルトの色を変更したいです。
2. ...行を選択しました。
TableViewの行の色を変更する方法は?

CSSファイルでそれのすべてを行う簡単な方法はありますか?

私が見つけたすべては、ケース1のために、私はCSSファイルに

.table-cell:hover { -fx-background-color: green; }

を設定することができるということです。これにより、セルの色は変化しますが、行全体の色は変化しません。

.table-view .row-selection:hover{ -fx-background-color: lightgreen; } と私は働いていないしようとした他の組み合わせがたくさん。

答えて

16
/* Selected row */ 
.table-view:focused .table-row-cell:filled:focused:selected { 
    -fx-background-color: brown; 
    -fx-background-insets: 0, 1, 2; 
    -fx-background: -fx-accent; 
    -fx-text-fill: -fx-selection-bar-text; 
} 

/* Selected row when table not focused */ 
.table-row-cell:filled:focused:selected { 
    -fx-background-color: red; 
    -fx-background-insets: 0, 1, 2; 
    -fx-background: -fx-accent; 
    -fx-text-fill: -fx-selection-bar-text; 
} 

/* Row hovered */ 
.table-view:row-selection .table-row-cell:filled:hover { 
    -fx-background-color: green; 
    -fx-background-insets: 0, 0 0 1 0; 
    -fx-text-fill: -fx-text-inner-color; 
} 

/* Selected row hovered */ 
.table-view:focused .table-row-cell:filled:focused:selected:hover { 
    -fx-background: -fx-accent; 
    -fx-background-color: yellow; 
    -fx-background-insets: 0, 1, 2; 
    -fx-text-fill: -fx-selection-bar-text; 
} 

/* Selected row hovered when table not focused */ 
.table-view:row-selection .table-row-cell:filled:focused:hover { 
    -fx-background-color: blue; 
    -fx-background-insets: 0, 0 0 1 0, 1 1 2 1, 2 2 3 2, 3 3 4 3; 
    -fx-text-fill: -fx-text-inner-color; 
} 
+0

+1私は最初のセクションから 'focused'を削除しますが、' .table-view:focused .table-row-cell:filled:selected'と読みます。その理由は、複数の選択が有効になっている場合、最初に選択された行にのみ影響します。 –

関連する問題