title: JavaFX: Align treetableview expand arrow to the row content
body: <p>Below is my <code>TreeTableView</code>. As you can see, the arrows for expanding collapsing the level are not in line with the data. </p>
  
  <p><a href="https://i.stack.imgur.com/a1bLb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/a1bLb.png" alt="enter image description here"></a>
   I want to make them in one line. But don't know how to do that. I tried the following ways in the css but none of it works.</p>
  
  <pre><code>.tree-table-row-cell .arrow {
      -fx-alignment: CENTER;
      -fx-mark-color:red;
  }
  .tree-table-row-cell .arrow-button {
      -fx-alignment: CENTER;
      -fx-mark-color:blue;
  }
  
  .tree-table-cell .arrow {
      -fx-alignment: CENTER;
      -fx-mark-color:yellow;
  }
  .tree-table-cell .arrow-button {
      -fx-alignment: CENTER;
      -fx-mark-color:green;
  } 
  .tree-table-cell &gt; .arrow-button &gt;.arrow{
     -fx-alignment: CENTER;
     -fx-mark-color:purple;
  }
  .tree-table-row-cell &gt; .arrow-button &gt;.arrow{
     -fx-alignment: CENTER;
     -fx-mark-color:grey;
  }
  </code></pre>
  
  <p>Does anyone have any idea how can I achieve this?</p>