title: Remove horizontal lines in TableView in JavaFX 8 using CSS
body: <p>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.</p>
  
  <pre><code>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);
  }
  </code></pre>
  
  <p>}</p>
  
  <p>Nothing special really. The FXML template i used to create the Scene is next</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;?import java.lang.*?&gt; 
  &lt;?import javafx.scene.control.*?&gt;
  &lt;?import javafx.scene.layout.*?&gt;
  
  &lt;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"&gt;
  &lt;center&gt;
     &lt;TableView fx:id="table" prefHeight="712.0" prefWidth="992.0" BorderPane.alignment="CENTER"&gt;
       &lt;columns&gt;
         &lt;TableColumn prefWidth="75.0" text="C1" /&gt;
         &lt;TableColumn prefWidth="75.0" text="C2" /&gt;
       &lt;/columns&gt;
     &lt;/TableView&gt;
  &lt;/center&gt;
  &lt;top&gt;
     &lt;Label text="Label" BorderPane.alignment="CENTER" /&gt;
  &lt;/top&gt;
  &lt;/BorderPane&gt;
  </code></pre>
  
  <p>Finally my css file</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>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</p>
  
  <p><a href="https://i.stack.imgur.com/euoeh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/euoeh.png" alt="enter image description here"></a></p>