如何在JavaFX中删除TableView标头中的边框

Question

我在javaFX应用程序的许多地方都使用TableView。我正在研究黑暗模式主题，并希望为该表设置样式。现在，我无法删除标题行中的边框。此外，在我的应用程序中，表行中的文本颜色仍为黑色，尽管其余文本显示为白色（由于root css类中的-fx-base为深色）。该表如下所示：

css：

.root {
-fx-base:#292929;
}

.table-view {
   -fx-background-color: transparent;
   -fx-border-color: all-dialog-border-color;
   -fx-border-width: 1;
   -fx-table-header-border-color: transparent;
   -fx-table-cell-border-color: transparent;
   -fx-text-fill: white;
}

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

.table-row-cell
{
    -fx-background-insets: 0, 0 0 1 0;
    -fx-background-color: transparent;
    -fx-text-fill: white;
}
.table-column {
  -fx-alignment: CENTER;
}

.table-view:focused .table-row-cell:focused {
    -fx-table-cell-border-color: transparent;
}

我想删除标题中各列之间的边界，并使表行中的文本显示为白色。我该如何实现？

Answer 1

只需使用此CSS，它就可以为您提供所有您想要的自定义

.table-view{
    -fx-background-color: white;
    -fx-font-size: 20px;
    -fx-border-color: derive(black, -60%);
}
.table-view:focused{
    -fx-background-color: derive(-fx-primary, 20%);
}
.table-row-cell {
    -fx-cell-size: 40px;
    -fx-border-style:solid inside;
     -fx-border-width:2;
}
.table-view .column-header-background{
    -fx-background-color: white;
}
.table-view .column-header-background .label{
    -fx-background-color: transparent;
    -fx-text-fill: black;
    -fx-text-weight:strong;
    -fx-border-style:solid inside;
    -fx-border-width:2;
    -fx-border-radius:20;
    -fx-padding:7;
    -fx-font-size:18;
 }
.table-view .column-header {
    -fx-background-color: transparent;
 }
.table-view .table-cell{
    -fx-text-fill: black;
    -fx-font-size:15;
    -fx-alignment:center;
    -fx-border-style:solid inside;
    -fx-border-width:1;
}

.table-row-cell:focused, .table-cell:focused{
    -fx-text-fill: red;
}
.table-row-cell{
    -fx-background-color: -fx-primary;
    -fx-border-color: black;
    -fx-table-cell-border-color: transparent;
 }

.table-row-cell:empty{
    -fx-background-color:white;
    -fx-border-color: transparent;
    -fx-table-cell-border-color: transparent;
 }

.table-column{
    -fx-alignment: CENTER;
 }
.table-row-cell:even{
    -fx-background-color: derive(white, -10%);
 }
.table-row-cell:odd{
     -fx-background-color: white;
 }
 .table-row-cell:even:hover{
     -fx-background-color:pink;
 }
 .table-row-cell:odd:hover{
    -fx-background-color: skyblue;
 }

.table-row-cell:even:empty{
    -fx-background-color: white;
}
.table-row-cell:odd:empty{
    -fx-background-color: white;
}

.table-row-cell:selected {
    -fx-background-color: black;
    -fx-text-fill: white;
    -fx-background-insets: 0;
 }
.table-row-cell:selected .table-cell{
    -fx-text-fill: white;
 }

Answer 2

[经过Tule Simon建议的TableView CSS之后，我意识到缺少某些CSS类。要从表头删除边框，请使用：

.table-view .column-header
{
   -fx-border-style: none;
}

使单元格中的文本显示为白色：

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

结果：