使用CSS删除JavaFX 8中TableView中的水平线

时间:2016-08-31 06:02:07

标签: css tableview javafx-8

正如你在帖子标题中看到的那样,我想用CSS删除我的TableView中的所有水平白线,我认为这个问题非常简单,但直到现在我还是无法运行。我的代码的主要类是它的下一个。

public class Main extends Application{

@Override
public void start(Stage primaryStage) throws Exception{
    setUserAgentStylesheet(Main.STYLESHEET_CASPIAN);

    FXMLLoader loader = new FXMLLoader();
    Parent root = loader.load(getClass().getResource("sample.fxml").openStream());
    primaryStage.setTitle("Hello World");

    primaryStage.setScene(new Scene(root, 300, 275));
    Controller c = (Controller) loader.getController();
    c.fillTable();
    root.getStylesheets().add("style.css");

    primaryStage.show();
}


public static void main(String[] args) {
    launch(args);
}

}

真的没什么特别的。用于创建场景的FXML模板是下一个

<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?> 
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<BorderPane fx:controller="sample.Controller" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="601.0" prefWidth="846.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
<center>
   <TableView fx:id="table" prefHeight="712.0" prefWidth="992.0" BorderPane.alignment="CENTER">
     <columns>
       <TableColumn prefWidth="75.0" text="C1" />
       <TableColumn prefWidth="75.0" text="C2" />
     </columns>
   </TableView>
</center>
<top>
   <Label text="Label" BorderPane.alignment="CENTER" />
</top>
</BorderPane>

最后我的css文件

.table-view .column-header .label{
    -fx-text-fill: white;
    -fx-alignment: CENTER;
}

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

.table-view .column-header, .table-view .filler {
    -fx-background-color: coral;
    -fx-size: 35px;
    -fx-border-color: -fx-box-border;
    -fx-border-width: 0 1 3 0;
    -fx-border-insets: 0;
}

.table-view .table-cell{
    -fx-padding: 0.166667em; /* 2px, plus border adds 1px */
    -fx-background-color: transparent;
    -fx-border-color: transparent -fx-table-cell-border-color -fx-table-cell-border-color transparent;

    -fx-table-cell-border-color:transparent;
    -fx-cell-size: 2.0em; /* 24 */
    -fx-text-fill: white;
}

.table-view .table-row-cell{
    -fx-background-color: #AB4642;
    -fx-border-width: 1;
}

.table-view .table-row-cell:selected{
    -fx-background-color: #203c41;
}

.table-view:row-selection .table-row-cell:filled:hover {
    -fx-background-color: #7cafc2;
    -fx-background-insets: 0, 0 0 1 0;
    -fx-text-fill: -fx-text-inner-color;
}

.table-view .table-cell:hover{
    -fx-background-color: #203c41;
}

.table-view .table-cell:empty:hover{
    -fx-background-color: #AB4642;
}

.table-row-cell:filled:focused:selected {
    -fx-background-color: #bbd4ff;
    -fx-background-insets: 0, 1, 2;
    -fx-background: -fx-accent;
    -fx-text-fill: -fx-selection-bar-text;
}

当我运行此示例时,输出看起来类似于我附加的图像。我只是意识到,如果从Main方法的开头删除Caspian.css,所有白线都会消失,但问题是我想保留样式并删除这些行。也许我的要求过于简单,但说实话,我无法让它发挥作用,所以我将不胜感激。感谢

enter image description here

1 个答案:

答案 0 :(得分:0)

我实际上找到了自己问题的答案,为了删除所有白线,我只将以下几行添加到css文件中:

.root .table-view{
    -fx-control-inner-background: #AB4642;
}

工作完成了!感谢James_D试图帮助我。