如何用CSS调整JFX TableView列显隐按钮尺寸及替换图标

我刚好折腾过类似的需求，这两个调整都能通过自定义CSS轻松实现，具体方法如下：

一、把窄矩形按钮改成正方形 #

这个右上角的列菜单按钮对应的CSS选择器是 .table-view .column-header-background .show-hide-columns-button。默认样式里它的宽高是不对等的，直接指定固定的最小/最大宽高就能强制变成正方形：

.table-view .column-header-background .show-hide-columns-button {
    /* 数值可以根据你的UI需求调整，这里用24px做示例 */
    -fx-min-width: 24px;
    -fx-min-height: 24px;
    -fx-max-width: 24px;
    -fx-max-height: 24px;
    /* 可选：让内部图标居中显示 */
    -fx-alignment: center;
}

之前你试的padding无效，是因为这个按钮的默认尺寸被样式里的其他属性锁死了，直接指定宽高才是最有效的方式。

二、替换"+"图标为本地PNG图片 #

默认的"+"是通过-fx-shape绘制的SVG路径，我们只需要去掉这个属性，改用-fx-background-image来挂载本地图片即可：

.table-view .column-header-background .show-hide-columns-button .arrow {
    /* 清除默认的shape绘制规则 */
    -fx-shape: "";
    /* 设置图片路径，注意两种写法：
       - 本地磁盘文件：url("file:/绝对路径/your-icon.png")
       - 项目资源文件：url("/你的包路径/your-icon.png") */
    -fx-background-image: url("file:/Users/xxx/icons/custom-plus.png");
    /* 让图片自适应按钮大小 */
    -fx-background-size: contain;
    -fx-background-repeat: no-repeat;
    -fx-background-position: center;
    /* 去掉默认背景色，避免遮挡图片 */
    -fx-background-color: transparent;
}

如果图片是放在项目的resources目录下，直接用相对资源路径就行；本地文件记得写完整的绝对路径（开头要加file:/）。

最后应用样式 #

把上面的CSS代码保存成.css文件，然后在Java代码里加载到你的TableView上：

yourTableView.getStylesheets().add("path/to/your/custom-style.css");

这样就能看到修改后的效果了！

内容的提问来源于stack exchange，提问作者Cherple