如何设置 TableView 的样式以使其具有透明列 header 且没有垂直线？

Question

我正在尝试为我的 table 视图实现以下样式：

即：透明headers和边框，列与列之间没有垂直线。

我尝试用这个 CSS 将 header 背景设置为透明，但没有任何效果：

.table-view .column-header,
.table-view .column-header-background .filler{
    -fx-background-color: transparent;
}

如何实现？下面的 FXML。

<?xml version="1.0" encoding="UTF-8"?>

<?import agill.deshopp.components.*?>
<?import java.net.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>

<fx:root prefHeight="664.0" prefWidth="1024.0" style="-fx-background-color: white;" type="AnchorPane" xmlns="http://javafx.com/javafx/10.0.2-internal" xmlns:fx="http://javafx.com/fxml/1">
    <stylesheets>
        <URL value="@../css/new-guest-browser.css" />
    </stylesheets>
   <children>
      <TableView fx:id="fnrhTableView" layoutX="50.0" layoutY="408.0" prefHeight="241.0" prefWidth="904.0" AnchorPane.bottomAnchor="15.0" AnchorPane.leftAnchor="50.0" AnchorPane.rightAnchor="70.0" AnchorPane.topAnchor="408.0">
        <columns>
          <TableColumn fx:id="cnpjColumn" prefWidth="75.0" text="CNPJ" />
            <TableColumn fx:id="cpfColumn" prefWidth="75.0" text="CPF" />
            <TableColumn fx:id="nameColumn" prefWidth="75.0" text="Nome" />
            <TableColumn fx:id="statusColumn" prefWidth="75.0" text="Status" />
            <TableColumn fx:id="valueColumn" prefWidth="76.0" text="Valor" />
            <TableColumn fx:id="checkInColumn" prefWidth="125.0" text="Prev. Entrada" />
            <TableColumn fx:id="checkOutColumn" prefWidth="94.0" text="Prev. Saída" />
            <TableColumn fx:id="actionColumn" prefWidth="94.0" text="Ação" />
        </columns>
         <columnResizePolicy>
            <TableView fx:constant="CONSTRAINED_RESIZE_POLICY" />
         </columnResizePolicy>
      </TableView>
   </children>
</fx:root>

OBS：如您所见，还有更多列，但我没有在示例中显示它们，因为原始包含一些敏感数据。

Answer 1

我试过用透明背景，但是它是标准的灰色，所以我在这个例子中使用了白色:

.table-view .column-header,
.table-view .column-header .filler,
.table-view .column-header-background .filler {
    -fx-background-color: white;
    -fx-border-width: 0;
}

.table-view .column-header {
    -fx-border-width: 0 0 2 0;
    -fx-border-color: lightgrey;
}

.table-view .column-header .label {
    -fx-alignment: center_left;
    -fx-font-size: 16pt;
    -fx-padding: 5 0 15 0;
}

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

.table-row-cell:selected {
    -fx-background-color: lightgrey;
}

.table-view .table-cell {
    -fx-border-color: lightgrey;
    -fx-border-width: 1 0 0 0;
    -fx-font-size: 16pt;
    -fx-padding: 5 3 15 3;
}

预览：

如何设置 TableView 的样式以使其具有透明列 header 且没有垂直线？

How to style TableView to have a transparent column header and no vertical lines?

css

java

javafx