我想用一个用于标题文本定位的自定义css来更改默认行为.但是,必须能够更改各个列的位置.

然而,它并不起作用.

我的新默认值.它应该向左对齐而不是中间对齐. 这也适用于以下css.

/*Css*/
.table-view .column-header .label{
    -fx-alignment:CENTER_LEFT;
    -fx-padding: 2 0 2 10;
}

但是,我希望能够为各个列覆盖此行为.例如,列标题居中或向右对齐.

我已经用下面的代码try 过这一点.

/*Code*/
myColumn.getStyleClass().add("ds-column-header-right");
/*Css*/
.ds-column-header-right .label{
    -fx-alignment: CENTER_RIGHT;
    -fx-padding: 2 10 2 0;
}

如果只存在这个自定义的css(ds-Column-Header-Right)定义,它就可以工作,并且标题标题右对齐.

但是,如果这两个CSS定义都存在,则标题文本始终左对齐,即使我已将右对齐样式显式分配给某些列.

如果不显式地将每一列指定给样式,如何解决该问题?

这是在Java 17、JavaFx 21.0.2下测试的

下面是一个完整的(最小)示例:

//Main.java
package application;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;


public class Main extends Application {
    @Override
    public void start(final Stage primaryStage) {
        try {
            TableView<Person> tableView = new TableView<>();

            TableColumn<Person, String> nameColumn = new TableColumn<>("Name");

            TableColumn<Person, String> emailColumn = new TableColumn<>("Email");
            emailColumn.getStyleClass().add("ds-column-header-right");

            tableView.getColumns().add(nameColumn);
            tableView.getColumns().add(emailColumn);

            VBox vbox = new VBox(tableView);

            Scene scene = new Scene(vbox, 400, 400);
            scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
            primaryStage.setScene(scene);
            primaryStage.show();
        } catch(Exception e) {
            e.printStackTrace();
        }
    }

    public static void main(final String[] args) {
        launch(args);
    }
}
//Person.java
package application;

import javafx.beans.property.SimpleStringProperty;

public class Person {
    private final SimpleStringProperty name;
    private final SimpleStringProperty email;

    public Person(final String name, final String email) {
        this.name = new SimpleStringProperty(name);
        this.email = new SimpleStringProperty(email);
    }

    public String getName() {
        return name.get();
    }

    public void setName(final String fName) {
        name.set(fName);
    }

    public String getEmail() {
        return email.get();
    }

    public void setEmail(final String fEmail) {
        email.set(fEmail);
    }
}
/*application.css*/
.table-view .column-header .label{
    -fx-alignment:CENTER_LEFT;
    -fx-text-fill: blue;
}

.ds-column-header-right .label{
    -fx-alignment: CENTER_RIGHT;
    -fx-text-fill: red;
}

推荐答案

据我所知(尽管我在写这篇文章的时候很难找到这方面的文档),当多个CSS规则应用于给定的Node个规则时,具有"最具体" Select 器的规则优先.如果 Select 器具有相同的特异性,则最近应用的 Select 器优先."特异性"在这里没有明确定义,因此可能需要进行一些试验和错误.

在您的css中,"默认"列对齐是用 Select 器指定的

.table-view .column-header .label {
    /* ... */
}

它是被定义为三级的CSS类名称分层 struct 的 Select 器(即,它应用于具有类label的 node ,该 node 是具有类column-header的 node 的后代,该 node 是具有类table-view的 node 的后代).

另一方面,您的"定制"CSS规则定义了一个两级层次 struct ,这被认为是"不太具体"的:

.ds-column-header-right .label {
    /* ... */
}

因此,"更具体"的 Select 器始终优先.

有几个修复似乎起作用了.将table-view添加到"自定义"CSS规则的 Select 器层次 struct 中,使它们"具有相同的专用性",因此最后发布的那个将优先.因此,以下是可行的方法:

.table-view .column-header .label{
    -fx-alignment:CENTER_LEFT;
    -fx-text-fill: blue;
}

.table-view .ds-column-header-right .label {
    -fx-alignment: CENTER_RIGHT;
    -fx-text-fill: red;
}

请注意,在这种情况下颠倒顺序将使"默认"(蓝色)规则在所有情况下都优先.

还要注意,"定制"表列中的列标题有两个css类:默认的column-headerand和定制的ds-header-right css类.您可以通过连接两个类 Select 器with no space between them来 Select 具有两个CSS类的 node .所以 Select 器

.column-header.ds-column-header-right .label {
    /* ... */
}

将与您的定制列标题匹配,并且由于它有三个类 Select 器,因此它也与默认规则的 Select 器具有相同的专用性.

因此,这也是可行的:

.table-view .column-header .label{
    -fx-alignment:CENTER_LEFT;
    -fx-text-fill: blue;
}

.column-header.ds-column-header-right .label {
    -fx-alignment: CENTER_RIGHT;
    -fx-text-fill: red;
}

但同样,颠倒顺序将导致默认规则在所有情况下都适用.

最后,请注意,如果您使用

.table-view .column-header.ds-column-header-right .label {
    /* ... *.
}

(它 Select 一个具有css类label的 node ,它是同时具有css类column-header和css类ds-column-header的 node 的后代,而后者又是具有css类table-view的 node 的后代),这是一个具有四个类名的 Select 器,它比您的"默认"CSS规则的 Select 器更具体.因此,无论顺序如何,此 Select 器都将工作,并且以下任一项工作都是所需的:

.table-view .column-header .label{
    -fx-alignment:CENTER_LEFT;
    -fx-text-fill: blue;
}

.table-view .column-header.ds-column-header-right .label {
    -fx-alignment: CENTER_RIGHT;
    -fx-text-fill: red;
}

.table-view .column-header.ds-column-header-right .label {
    -fx-alignment: CENTER_RIGHT;
    -fx-text-fill: red;
}

.table-view .column-header .label{
    -fx-alignment:CENTER_LEFT;
    -fx-text-fill: blue;
}

Descendency here is a bit hard to figure because, strictly speaking, the TableColumn itself is not part of the same TableView substructure as the actual column headers. (See the "Substructure" section in the documentation.) The internal code f或 the TableColumn skin propagates all style classes both to the column header and to cells in the column.

Css相关问答推荐

在COLOR-MIX()中使用var()似乎会使其对于不支持COLOR-MIX()的浏览器具有可读性,从而阻止了回退的工作

悬停时可展开的按钮与屏幕右侧对齐,如何保持未悬停的按钮正确对齐?

R SHINY:FILL CONTAINER=TRUE时调整DT数据表高度,

VueJS3+Vutify中缺少一些CSS类

设置项目的最大宽度和最大高度

如何在css中创建文件div效果

你能混合固定/相对定位吗?

使用 CSS 关键帧动画更改内容

使用 React 和 Flexbox 文本溢出框外

Angular Datepicker - 更改日期范围 Select 样式

Flexbox 子高度它的内容

如何通过单击
  • 激活 HTML 链接?
  • 使用边距:0 自动;在 Internet Explorer 8 中

    如何使用 Gulp 复制多个文件并保持文件夹 struct

    如何在浏览器的右下角放置一个div?

    矩形图像的 CSS 圆形裁剪

    了解 Bootstrap 3 中的网格类( col-sm-# 和 col-lg-# )

    CSS属性中的auto值是什么意思.

    CSS:怎么说 .class:last-of-type [类,不是元素!]

    如何复制 iOS 上固定的后台附件