如何在 JavaFX 的 TableView header 中删除边框

Question

我在我的 javaFX 应用程序的许多地方使用 TableView。我正在制作深色模式主题，并想为其设计样式 table。现在我无法删除 header 行中的边框。此外，table 行中的文本颜色仍然是黑色，尽管其余文本在我的应用程序中显示为白色（因为根 css class 中的 -fx-base 颜色较深） . table 看起来像这样：

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;
}

我想删除 header 中各列之间的边框并使 table 行中的文本显示为白色。我该如何实现？

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 header 的边框，请使用：

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

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

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

结果：

如何在 JavaFX 的 TableView header 中删除边框

How to remove borders in TableView header in JavaFX

css

javafx

tableview