JavaFx中的表格設計

Question

如何在javafx中設計如上所述的表格。我使用tableview並做了一些CSS，但設計不是我想要的。

請誰能告訴我怎樣才能實現上述設計

這裏是我試過

.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 */ 
} 

目前的設計表

Answer 1

的CSS這個圖的Css回覆：

.table-view .column-header, 
.table-view .column-header .filler, 
.table-view .column-header-background .filler { 
    -fx-background-color: derive; 
    -fx-stroke: transparent; 
    -fx-size:50; 
    -fx-alignment: CENTER ;  
    -fx-text-alignment: center; 

} 
.table-row-cell:filled:hover { 

    -fx-size:50; 
    -fx-alignment: CENTER; 
    -fx-text-alignment: center; 


} 
.table-view:row-selection { 
    -fx-background-color: transparent; 
    -fx-text-fill: white; 
    -fx-fixed-cell-size: 50; 
    -fx-alignment: CENTER; 
    -fx-text-alignment: center; 

} 

.table-view .table-column{ 
    -fx-text-alignment: center; 
    -fx-alignment: CENTER 

}