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 

}