java - JavaFx 中的表设计

Question

如何在 javafx 中设计一个像上面那样的表。我正在使用 tableview 并做了一些 css，但设计不是我想要的那么好。

谁能告诉我如何实现上述设计

这是我试过的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:

.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 

}