如何样式化TableView以使列标题透明并且没有垂直线?

huangapple go评论56阅读模式
英文:

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

问题

我尝试实现我的表格视图的以下样式:

如何样式化TableView以使列标题透明并且没有垂直线?

也就是说:透明的标题和边框,以及列之间没有垂直线。

我尝试使用以下CSS将标题背景设置为透明,但没有任何效果:

.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>

注意:正如您所见,还有更多的列,但我没有在示例中显示它们,因为原始数据包含一些敏感信息。

英文:

I'm trying to achieve the following style for my table view:

如何样式化TableView以使列标题透明并且没有垂直线?

That is: transparent headers and border, and no vertical lines between columns.

I tried setting the header background to transparent with this CSS, but it didn't have any effect:

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

How do I achieve this? FXML below.

&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;

&lt;?import agill.deshopp.components.*?&gt;
&lt;?import java.net.*?&gt;
&lt;?import javafx.scene.control.*?&gt;
&lt;?import javafx.scene.layout.*?&gt;
&lt;?import javafx.scene.text.*?&gt;

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

OBS: As you can see, there are more columns but I didn't show them on the example because the original contains some senstive data.

答案1

得分: 2

我尝试过使用透明背景,但那时候它是标准的灰色,所以我在这个示例中使用了白色

.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以使列标题透明并且没有垂直线?

英文:

I tried it with transparent background, but then it is the standard grey color, so I used white in this example:

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

Preview:

如何样式化TableView以使列标题透明并且没有垂直线?

huangapple
  • 本文由 发表于 2020年7月29日 01:13:25
  • 转载请务必保留本文链接:https://go.coder-hub.com/63139414.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定