Remove horizontal lines in TableView in JavaFX 8 using CSS

Question

as you can see in the post title, I want to remove all the horizontal white lines in my TableView using CSS, I thought the problem was very simple, but until now I can't get it work. The Main class of my code it's next.

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

}

Nothing special really. The FXML template i used to create the Scene is next

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

Finally my css file

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

When I run this example, the output look similar to the image I attach. I just realize that if you remove Caspian.css from the beginning of Main method, all white lines vanish, but the problem is that I want to keep the style and just remove this lines. Maybe my request is too simple, but honestly i can't get it work, so I will appreciate any help. Thanks

Answer 1

I actually found the answer for my own question, in order to remove all the white lines, I only add the following lines to the css file:

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

And the work is done!. Thanks to James_D for trying to help me.