JavaFx中如何让Table的水平、垂直角的滚轮背景颜色透明？

Question

这是框架的图像。我已经突出显示了我想要透明的角。

我面临着使桌子的角颜色透明的问题。我不知道为什么它没有改变，因为我还改变了表头和表视图的背景颜色。

这是我的 FXML 代码：

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

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Menu?>
<?import javafx.scene.control.MenuBar?>
<?import javafx.scene.control.MenuItem?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.control.cell.PropertyValueFactory?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>

<BorderPane maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" xmlns="http://javafx.com/javafx/17.0.6"
            xmlns:fx="http://javafx.com/fxml/1"
            fx:controller="com.al_makkah_traders_app.controller.DashBoardController">
    <top>
        <MenuBar BorderPane.alignment="CENTER">
            <menus>
                <Menu mnemonicParsing="false" text="Bills">
                    <items>
                        <MenuItem mnemonicParsing="false" onAction="#walkInBillMenuItem" text="Walk In Bill"/>
                        <MenuItem mnemonicParsing="false" onAction="#accountHolderBillMenuItem"
                                  text="Account Holder Bill"/>
                        <MenuItem mnemonicParsing="false" onAction="#emptyBillMenuItem" text="Empty Bill"/>
                    </items>
                </Menu>
                <Menu mnemonicParsing="false" text="Stock">
                    <items>
                        <MenuItem mnemonicParsing="false" onAction="#onAddNewProductMenuItem" text="Add New Product"/>
                        <MenuItem mnemonicParsing="false" onAction="#onPurchaseRequestMenuItem"
                                  text="Purchase Request"/>
                        <MenuItem mnemonicParsing="false" onAction="#onStockArrivalMenuItem" text="Stock Arrival"/>
                        <MenuItem mnemonicParsing="false" onAction="#onStockTransferMenuItem" text="Stock Transfer"/>
                    </items>
                </Menu>
                <Menu mnemonicParsing="false" text="Accounts">
                    <items>
                        <MenuItem mnemonicParsing="false" onAction="#onAddAccountHolderMenuItem"
                                  text="Add Account Holder"/>
                        <MenuItem mnemonicParsing="false" text="Account Holder's Transactions"/>
                        <MenuItem mnemonicParsing="false" onAction="#onAddNewCompanyAccount" text="Company Accounts"/>
                        <MenuItem mnemonicParsing="false" text="Company Transactions"/>
                    </items>
                </Menu>
                <Menu mnemonicParsing="false" text="Reports">
                    <items>
                        <MenuItem mnemonicParsing="false" text="Daily Report"/>
                    </items>
                </Menu>
                <Menu mnemonicParsing="false" text="About">
                    <items>
                        <MenuItem mnemonicParsing="false" text="About"/>
                    </items>
                </Menu>
            </menus>
        </MenuBar>
    </top>
    <center>
        <VBox alignment="CENTER" styleClass="left-form" stylesheets="@../stylesheets/style.css"
              BorderPane.alignment="CENTER">
            <children>
                <Label alignment="CENTER" contentDisplay="CENTER" text="Al-Makkah Traders" textFill="WHITE">
                    <font>
                        <Font name="Berlin Sans FB Demi Bold" size="40.0"/>
                    </font>
                    <padding>
                        <Insets bottom="10.0" top="10.0"/>
                    </padding>
                </Label>
                <GridPane alignment="CENTER" hgap="30.0" styleClass="right-form" stylesheets="@../stylesheets/style.css"
                          vgap="10.0">
                    <columnConstraints>
                        <ColumnConstraints hgrow="ALWAYS"/>
                        <ColumnConstraints hgrow="ALWAYS"/>
                    </columnConstraints>
                    <rowConstraints>
                        <RowConstraints/>
                        <RowConstraints vgrow="ALWAYS"/>
                        <RowConstraints/>
                        <RowConstraints vgrow="ALWAYS"/>
                    </rowConstraints>
                    <children>
                        <Label text="Sales Logs" textFill="#14b8a6" GridPane.rowIndex="2">
                            <font>
                                <Font name="System Bold" size="25.0"/>
                            </font>
                        </Label>
                        <TableView fx:id="salesTableView" styleClass="right-form"
                                   stylesheets="@../stylesheets/style.css" GridPane.columnSpan="2"
                                   GridPane.rowIndex="3">
                            <columns>
                                <TableColumn fx:id="productColumn" text="Product">
                                    <cellValueFactory>
                                        <PropertyValueFactory property="product"/>
                                    </cellValueFactory>
                                </TableColumn>

                                <TableColumn fx:id="quantityColumn" text="Quantity">
                                    <cellValueFactory>
                                        <PropertyValueFactory property="quantity"/>
                                    </cellValueFactory>
                                </TableColumn>

                                <TableColumn fx:id="accountHolderColumn" text="Account Holder">
                                    <cellValueFactory>
                                        <PropertyValueFactory property="accountHolder"/>
                                    </cellValueFactory>
                                </TableColumn>

                                <TableColumn fx:id="paymentModeColumn" text="Payment Type">
                                    <cellValueFactory>
                                        <PropertyValueFactory property="paymentType"/>
                                    </cellValueFactory>
                                </TableColumn>

                                <TableColumn text="Amount">
                                    <cellValueFactory>
                                        <PropertyValueFactory property="amount"/>
                                    </cellValueFactory>
                                </TableColumn>
                            </columns>
                            <columnResizePolicy>
                                <TableView fx:constant="CONSTRAINED_RESIZE_POLICY"/>
                            </columnResizePolicy>
                        </TableView>
                        <Label text="Online Payments" textFill="#14b8a6" GridPane.columnIndex="1">
                            <font>
                                <Font name="System Bold" size="22.0"/>
                            </font>
                        </Label>
                        <TableView fx:id="onlinePaymentsTableView" GridPane.columnIndex="1" GridPane.rowIndex="1">
                            <columns>
                                <TableColumn text="Payment Mode">
                                    <cellValueFactory>
                                        <PropertyValueFactory property="paymentMode"/>
                                    </cellValueFactory>
                                </TableColumn>
                                <TableColumn text="Account Holder">
                                    <cellValueFactory>
                                        <PropertyValueFactory property="accountHolder"/>
                                    </cellValueFactory>
                                </TableColumn>
                                <TableColumn text="Account No">
                                    <cellValueFactory>
                                        <PropertyValueFactory property="accountNo"/>
                                    </cellValueFactory>
                                </TableColumn>
                                <TableColumn text="Amount">
                                    <cellValueFactory>
                                        <PropertyValueFactory property="amount"/>
                                    </cellValueFactory>
                                </TableColumn>
                            </columns>
                            <columnResizePolicy>
                                <TableView fx:constant="CONSTRAINED_RESIZE_POLICY"/>
                            </columnResizePolicy>
                        </TableView>
                        <Label text="Stock Arrivals" textFill="#14b8a6">
                            <font>
                                <Font name="System Bold" size="22.0"/>
                            </font>
                        </Label>
                        <TableView fx:id="stockArrivalsTableView" GridPane.rowIndex="1">
                            <columns>
                                <TableColumn text="Date">
                                    <cellValueFactory>
                                        <PropertyValueFactory property="date"/>
                                    </cellValueFactory>
                                </TableColumn>
                                <TableColumn text="Product Name">
                                    <cellValueFactory>
                                        <PropertyValueFactory property="productName"/>
                                    </cellValueFactory>
                                </TableColumn>
                                <TableColumn text="Quantity">
                                    <cellValueFactory>
                                        <PropertyValueFactory property="quantity"/>
                                    </cellValueFactory>
                                </TableColumn>
                                <TableColumn text="History">
                                    <cellValueFactory>
                                        <PropertyValueFactory property="history"/>
                                    </cellValueFactory>
                                </TableColumn>
                            </columns>
                            <columnResizePolicy>
                                <TableView fx:constant="CONSTRAINED_RESIZE_POLICY"/>
                            </columnResizePolicy>
                        </TableView>
                    </children>
                    <padding>
                        <Insets bottom="30.0" left="30.0" right="30.0" top="10.0"/>
                    </padding>
                    <VBox.margin>
                        <Insets bottom="20.0" left="20.0" right="20.0" top="20.0"/>
                    </VBox.margin>
                </GridPane>
            </children>
            <BorderPane.margin>
                <Insets/>
            </BorderPane.margin>
        </VBox>
    </center>
</BorderPane>

这是我的样式表文件代码：

.label {
    -fx-text: #fff;
}

.panel-view {
    -fx-background-color: #fff;
    -fx-effect: dropshadow(three-pass-box, rgba(0, 0, 0, 0.4), 10, 0, 0, 0);
    -fx-background-radius: 10px;
}

.button {
    -fx-background-color: #14b8a6;
    -fx-background-radius: 10px;
    -fx-cursor: hand;
    -fx-font-size: 14px; /* Add 'px' unit to font size */
    -fx-text-fill: #fff;
}

.left-form {
    -fx-padding: 10px;
    -fx-background-color: #14b8a6;
}

.login-right-panel {
    -fx-padding: 20px;
    -fx-background-color: #fff;
    -fx-border-color: #000;
    -fx-border-width:.4px .4px .4px 0px;
}

.login-left-form{
    -fx-padding: 10px;
    -fx-background-color:linear-gradient(to bottom right, #449d6b, #633364);
    -fx-border-color:#000;
    -fx-border-width:.4px 0px .4px .4px;
}

.right-form {
    -fx-padding: 20px 40px 40px 40px;
    -fx-background-color: #fff;
    -fx-background-radius: 10px;
}

.text-field {
    -fx-border-color: #3e3d3d;
    -fx-border-width: 0.5px;
    -fx-border-radius: 4px;
    -fx-font-family: "Tahoma";
    -fx-font-size: 13px; /* Add 'px' unit to font size */
}

.text-field:focused {
    -fx-border-color:linear-gradient(to bottom right, #449d6b, #633364);
    -fx-border-radius: 4px;
    -fx-border-width: 1.5;
}

.login-button {
    -fx-background-radius: 15px;
    -fx-cursor: hand;
    -fx-font-size: 14px; /* Add 'px' unit to font size */
    -fx-text-fill: #fff;
    -fx-font-family: "SansSerif";
    -fx-background-color:linear-gradient(to bottom right, #449d6b, #633364);
}

.combo-box {
    -fx-background-color: #fff;
    -fx-font-size: 11;
    -fx-border-color: #3e3d3d;
    -fx-border-width: 0.8;
    -fx-border-radius: 4px;
}

.combo-box:focused {
    -fx-border-color: #14b8a6;
    -fx-border-radius: 4px;
    -fx-border-width: 1.5;
}

.table-view {
    -fx-background-color: transparent;
    -fx-padding: 0px;
    -fx-border-color: linear-gradient(to bottom right, #449d6b, #633364);
    -fx-border-width: 2px;
    -fx-border-radius: 8px;
}

.table-view .table-column {
    -fx-alignment: CENTER;
}

.table-view .column-header-background {
    -fx-background-color: linear-gradient(to bottom right, #449d6b, #633364);
    -fx-background-radius: 8px 8px 0px 0px;
}

.table-view .column-header, .filter {
    -fx-background-color: transparent;
    -fx-font-size: 13px;
    -fx-size: 30px;
}

.table-view .column-header .label {
    -fx-text-fill: #fff;
}

Answer 1

我通过在 css 文件中使用此属性解决了这个问题。

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