javafx-表格（TableView）组件样式重置

本文正在参加「金石计划」

在项目中遇到要使用javafx表格的情况，但是发现样式有点丑，所以自己改了一版，样式修改并不是难点，但是比较繁琐，所以在这里分享下，大家有需要的可以参考一下，节省coding时间！

1.通过重置css可以实现如图效果

数据是通过SceneBuilder生成的，不用太在意。 再来看看原来的组件效果，如下： 是不是好看很多了，那是如何实现如下的效果的呢?接下来我们将带着以下问题来探讨今天的问题。

• 需要重置哪些表格样式？
• 如何知道组件的样式类（styleclass）名称？
• 重置其中样式需要哪些条件？
• 模拟表格数据？

2.重置表头样式

在重置表头样式之前得先介绍下表结构，如下：

<VBox prefWidth="1095.0" styleClass="legendBox,reset-table">
<TableView fx:id="guestTable" prefHeight="200.0" prefWidth="1076.0" >
    <placeholder>
        <Label text=""/>
    </placeholder>
    <columns>
        <TableColumn  prefWidth="75.0" text="行号" />
        <TableColumn  prefWidth="75.0" text="航班号" />
        <TableColumn  prefWidth="97.0" text="始发站" />
        <TableColumn  prefWidth="89.0" text="目的站" />
        <TableColumn  prefWidth="73.0" text="座位号" />
        <TableColumn  prefWidth="59.0" text="值机号" />
        <TableColumn  prefWidth="94.0" text="中文名" />
        <TableColumn  prefWidth="97.0" text="英文名" />
        <TableColumn  prefWidth="74.0" text="安检状态" />
        <TableColumn  prefWidth="118.0" text="安检时间" />
        <TableColumn  minWidth="0.0" prefWidth="74.0" text="安检备注" />
        <TableColumn  minWidth="1.0" prefWidth="65.0" text="登机状态" />
        <TableColumn  minWidth="1.0" prefWidth="66.0" text="登机口" />
        <TableColumn  minWidth="1.0" prefWidth="66.0" text="登机时间" />
        <TableColumn  minWidth="1.0" prefWidth="66.0" text="婴儿" />
        <TableColumn  minWidth="1.0" prefWidth="66.0" text="婴儿登机" />
        <TableColumn  minWidth="1.0" prefWidth="66.0" text="无纸化" />
    </columns>
</TableView>
</VBox>

这里可以清晰的看到，我们在TableView的父节点上加了1个styleClassreset-table。它增加了我们的权重，所以很容易就可以修改表格样式了。

/*表头设置*/
.reset-table .table-view .column-header {
    -fx-alignment: center;
    -fx-pref-height: 35;

}

/*表头的背景设置*/
.reset-table .table-view .column-header-background {
    -fx-pref-height: 35;
    -fx-background-color: #303b70;
    -fx-background-radius: 1;
}

/*表格头单元格*/
.reset-table .nested-column-header .table-column {
    -fx-pref-height: 35;
    -fx-border-width: 1px;
    -fx-border-color: transparent #1C244E transparent transparent;
}


/*表格头和行字体样式*/
.reset-table .table-cell, .column-header.table-column .label {
    -fx-font-size: 14;
    -fx-text-fill: white;
}

3. 删除或修改默认的“表中无内容”文本

第一种方式：

<TableView fx:id="guestTable" prefHeight="200.0" prefWidth="1076.0" >
    <placeholder>
        <Label text=""/>
    </placeholder>
</TableView>

第二种方式：

您可以将占位符设置为在JavaFX TableView没有要显示的行时显示。占位符必须是JavaFX节点类的实例，大多数（如果不是全部）JavaFX控件都是这样的。因此，您可以使用JavaFX ImageView或JavaFX标签作为占位符。或许你可以用图片占位会使你的表格更加的美观。以下是在JavaFX TableView中使用标签作为占位符的示例：

tableView.setPlaceholder(new Label("No Data"));

使内容区域透明

/*表格内容区域*/
.reset-table .table-view .placeholder {
    -fx-background-color: transparent;
}

前后对比变化

4.重置表内容样式

在重置了表头内容时候，可能会有个疑问？我怎么知道内置的表头样式class,我当初也是遇到这样的问题，在这里需要介绍sceneBuilder这个软件了。

软件参考文档和下载地址：IntelliJ IDEA中配置SceneBuilder 配置问题不多介绍了，可以参考上面文档。那如何定位css类名呢？

通过上图我们很清楚的就知道了对应的类名了。顺便也插一嘴，介绍下sceneBuilder模拟表格数据和预览的功能。

1. 模拟表格数据
2. 预览 重置表格内容css代码：

/*表格内容区域*/
.reset-table .table-view .placeholder {
    -fx-background-color: transparent;
}

/*表格内容区域每行的样式*/
.reset-table .table-row-cell {
    -fx-background-color: #0A0919;
}

/*表格内容区域每行的样式-奇数*/
.reset-table .table-row-cell:odd {
    -fx-background-color: #052044;
}


/*表格行单元格单个单元格*/
.reset-table .table-row-cell .table-cell {
    -fx-pref-height: 30;
    -fx-border-width: 0px;
}

优化表格样式

接下来我们将从以下三点来进一步优化表格样式

1. 表格滚动条
2. 表格悬停和选中样式
3. 表格边角

优化表格滚动条css代码：

/* table-view竖直滑动条 */
.reset-table .virtual-flow .scroll-bar:vertical {
    -fx-pref-width: 12;
    -fx-background-color: #303B70;
}

/* table-view水平滑动条 */
.reset-table .virtual-flow .scroll-bar:horizontal {
    -fx-pref-height: 12;
    -fx-background-color: #303B70;
}

/* 竖直滚动条bar*/
.reset-table .virtual-flow .scroll-bar:vertical .thumb {
    -fx-background-color: #ccc;
}

/* 水平滚动条bar*/
.reset-table .virtual-flow .scroll-bar:horizontal .thumb {
    -fx-background-color: #ccc;
}

表格悬停和选中样式css代码：

/*表格行单元格-悬停*/
.reset-table .table-row-cell:hover {
    -fx-background-color: #B5C0F4;
}

/*表格行单元格-选中*/
.reset-table .table-row-cell:selected {
    -fx-text-fill: black;
    -fx-background-color: #1677FF;
}

表格边角css代码:

/* 用于去掉上下按键容器 */
.reset-table .virtual-flow .scroll-bar:vertical .decrement-button,
.reset-table .virtual-flow .scroll-bar:vertical .increment-button,
.reset-table .virtual-flow .scroll-bar:horizontal .decrement-button,
.reset-table .virtual-flow .scroll-bar:horizontal .increment-button {
    -fx-pref-width: 0;
    -fx-pref-height: 0;
}

/* 用于去掉上下按键 */
.reset-table .virtual-flow .scroll-bar:vertical .decrement-button .decrement-arrow,
.reset-table .virtual-flow .scroll-bar:vertical .increment-button .increment-arrow,
.reset-table .virtual-flow .scroll-bar:horizontal .decrement-button .decrement-arrow,
.reset-table .virtual-flow .scroll-bar:horizontal .increment-button .increment-arrow {
    -fx-padding: 0 0 0 0;
    -fx-shape: "";
}
/*表格右下角-角*/
.reset-table .virtual-flow .corner {
    -fx-background-color: #303B70;
}

5.完整css代码

/*表格样式*/
.reset-table .table-view {
    -fx-background-color: transparent;

}

/*表头设置*/
.reset-table .table-view .column-header {
    -fx-alignment: center;
    -fx-pref-height: 30;

}

/*表头的背景设置*/
.reset-table .table-view .column-header-background {
    -fx-background-color: -fx-commom-border-color;
    -fx-background-radius: 1;
}

/*表格头单元格*/
.reset-table .nested-column-header .reset-table-column {
    -fx-border-width: 1px;
    -fx-border-color: transparent #1C244E transparent transparent;
}

/*表格头和行字体样式*/
.reset-table .table-cell, .column-header.table-column .label {
    -fx-font-size: 14;
    -fx-text-fill: white;
}


/*表格内容区域*/
.reset-table .table-view .placeholder {
    -fx-background-color: transparent;
}

/*表格列*/
.reset-table .table-column {
    -fx-pref-height: 30;
    -fx-background-color: transparent;
    -fx-alignment: center;

}

/*表格内容区域每行的样式*/
.reset-table .table-row-cell {
    -fx-background-color: #0A0919;
}

/*表格内容区域每行的样式-奇数*/
.reset-table .table-row-cell:odd {
    -fx-background-color: #052044;
}


/*表格行单元格单个单元格*/
.reset-table .table-row-cell .table-cell {
    -fx-border-width: 0px;
}

/*表格行单元格-悬停*/
.reset-table .table-row-cell:hover {
    -fx-background-color: #B5C0F4;
}

/*表格行单元格-选中*/
.reset-table .table-row-cell:selected {
    -fx-text-fill: black;
    -fx-background-color: #B5C0F4;
}

/* table-view竖直滑动条 */
.reset-table .virtual-flow .scroll-bar:vertical {
    -fx-pref-width: 12;
    -fx-background-color: #303B70;
}

/* table-view水平滑动条 */
.reset-table .virtual-flow .scroll-bar:horizontal {
    -fx-pref-height: 12;
    -fx-background-color: #303B70;
}

/* 用于去掉上下按键容器 */
.reset-table .virtual-flow .scroll-bar:vertical .decrement-button,
.reset-table .virtual-flow .scroll-bar:vertical .increment-button,
.reset-table .virtual-flow .scroll-bar:horizontal .decrement-button,
.reset-table .virtual-flow .scroll-bar:horizontal .increment-button {
    -fx-pref-width: 0;
    -fx-pref-height: 0;
}

/* 用于去掉上下按键 */
.reset-table .virtual-flow .scroll-bar:vertical .decrement-button .decrement-arrow,
.reset-table .virtual-flow .scroll-bar:vertical .increment-button .increment-arrow,
.reset-table .virtual-flow .scroll-bar:horizontal .decrement-button .decrement-arrow,
.reset-table .virtual-flow .scroll-bar:horizontal .increment-button .increment-arrow {
    -fx-padding: 0 0 0 0;
    -fx-shape: "";
}

/* 竖直滚动条bar*/
.reset-table .virtual-flow .scroll-bar:vertical .thumb {
    -fx-background-color: #ccc;
}

/* 水平滚动条bar*/
.reset-table .virtual-flow .scroll-bar:horizontal .thumb {
    -fx-background-color: #ccc;
}

/*表格右下角-角*/
.reset-table .virtual-flow .corner{
    -fx-background-color: #303B70;
}