title: Javafx: Tableview header is not aligned with rows
body: <p><strong>Update</strong>
  Attached a <a href="https://dl.dropboxusercontent.com/u/69971588/TestTableView.zip" rel="nofollow noreferrer">sample code</a> that shows the problem. I noticed that it happens when:</p>
  
  <ol>
  <li>The tableview inside a grid pane with another control (say Combobox), so the tableview headers is aligned with the grid</li>
  <li>The first row of the tableview is empty</li>
  </ol>
  
  <p>I am trying to use TableView to display a title and TextField pair, using the following code (Java8u66)</p>
  
  <p><strong>FXML</strong></p>
  
  <pre><code>&lt;TableView fx:id="AttributeValueTableView" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" GridPane.columnSpan="2" GridPane.rowIndex="1"&gt;
   &lt;columns&gt;
    &lt;TableColumn fx:id="AttributeTableColumn" editable="false" minWidth="50.0" prefWidth="200.0" text="Attribute"/&gt;
    &lt;TableColumn fx:id="ValueTableColumn" maxWidth="1.7976931348623157E308" minWidth="50.0" prefWidth="400.0" text="Value"/&gt;
   &lt;/columns&gt;
   &lt;columnResizePolicy&gt;
    &lt;TableView fx:constant="CONSTRAINED_RESIZE_POLICY"/&gt;
   &lt;/columnResizePolicy&gt;
  &lt;/TableView&gt;
  </code></pre>
  
  <p><strong>Controller</strong></p>
  
  <pre><code>public class Controller implements Initializable {
  
  @FXML
  private TableView&lt;AttributeValuePair&gt; AttributeValueTableView;
  
  @FXML
  private TableColumn&lt;AttributeValuePair, String&gt; AttributeTableColumn;
  
  @FXML
  private TableColumn&lt;AttributeValuePair, Object&gt; ValueTableColumn;
  
  private ObservableList&lt;AttributeValuePair&gt; valuePairs = FXCollections.observableArrayList();
  
  @Override
  public void initialize(URL location, ResourceBundle resources) {
      AttributeTableColumn.setCellValueFactory(new PropertyValueFactory&lt;&gt;("name"));
      ValueTableColumn.setCellFactory(param -&gt; new AttributeValueCell());
      valuePairs.add(new AttributeValuePair("Attribute1"));
      valuePairs.add(new AttributeValuePair("Attribute2"));
      valuePairs.add(new AttributeValuePair("Attribute3"));
      valuePairs.add(new AttributeValuePair("Attribute4"));
      valuePairs.add(new AttributeValuePair("Attribute5"));
      valuePairs.add(new AttributeValuePair("Attribute6"));
      AttributeValueTableView.setItems(valuePairs);
  }
  
  private class AttributeValueCell extends javafx.scene.control.TableCell&lt;AttributeValuePair, Object&gt; {
      @Override
      protected void updateItem(Object item, boolean empty) {
          super.updateItem(item, empty);
          AttributeValuePair valuePair = (AttributeValuePair) this.getTableRow().getItem();
          if (empty || valuePair == null) {
              setGraphic(null);
              setText(null);
          } else {
              TextField t = new TextField();
              setGraphic(t);
          }
      }
  }
  }
  </code></pre>
  
  <p>I noticed that it works fine as long as there is empty rows as in the following figure
  <a href="https://i.stack.imgur.com/f7ePB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/f7ePB.png" alt="TableView with empty rows"></a></p>
  
  <p>However, it looks very distorted (even sometimes not aligned with the header) if all <strong>visible</strong> rows are used as in the following two figures.
  I am not sure if it is a bug or I am doing something wrong.</p>
  
  <p><em>BTW, if I started to resize one of the columns, the header will snap back to the rows</em></p>
  
  <p><a href="https://i.stack.imgur.com/F4IlW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/F4IlW.png" alt="Header is not aligned"></a>
  <a href="https://i.stack.imgur.com/VLqBR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VLqBR.png" alt="enter image description here"></a></p>