How to show grid lines for rows in TreeTableView - fxml

Question

I have the following FXML:
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<AnchorPane id="AnchorPane" prefHeight="600.0" prefWidth="1000.0" stylesheets="#../css/fxmlDemo.css" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="fxmldemo.controller.MainController">
<children>
<TreeTableView fx:id="treeTableView" prefHeight="600.0" prefWidth="1000.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" xmlns:fx="http://javafx.com/fxml">
<columns>
<TreeTableColumn fx:id="nameColumn" prefWidth="600.0" text="Name" />
<TreeTableColumn fx:id="sizeColumn" prefWidth="100.0" text="Size" />
<TreeTableColumn fx:id="lastModifiedColumn" prefWidth="300.0" text="Modified" />
</columns>
</TreeTableView>
</children>
</AnchorPane>
And in my fxmlDemo.css file I have tried things like:
* {
-fx-border-style: solid;
}
And
tree-table-view {
-fx-border-style: solid;
}
And
tree-item {
-fx-border-style: solid;
}
The first one puts a border around everything in the FXML, the other two do nothing.
What I want is to show grid lines like an Excel spread sheet. The code I'm using is very similar to what is seen in this example, but mine has been modified to actually work :)
Here is a link to the Java FX CSS Reference Guide, but it does not contain information on TreeTableView or its sub-components.

Answer 1

Using the following CSS I was able to configure the TreeTableView to look very similar to the TableView.
.tree-table-row-cell {
-fx-background-color: -fx-table-cell-border-color, -fx-control-inner-background;
-fx-background-insets: 0, 0 0 1 0;
-fx-padding: 0.0em;
-fx-text-fill: -fx-text-inner-color;
}
.tree-table-row-cell:selected {
-fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-focus-color;
-fx-background-insets: 0, 1, 2;
}
.tree-table-row-cell:odd {
-fx-background-color: -fx-table-cell-border-color, derive(-fx-control-inner-background,-5%);
-fx-background-insets: 0, 0 0 1 0;
}
.tree-table-row-cell:selected:odd {
-fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-focus-color;
-fx-background-insets: 0, 1, 2;
}
Remember that you can remove and add a stylesheet to a scene, this will speed up your development time.

Answer 2

.tree-table-cell {
-fx-border-color: black;
-fx-border-style: solid;
}
Go to caspian.css and look at all the table-cell stuff and add 'tree-' in front. They have lots of sub-styles and selectors.
I think '*' doesn't work because the default color is transparent.

Answer 3

Based on #tunabot 's answer and #Grochni 's comment, I made some fix and I added code to hide the empty rows at the end of the table when it has just a few rows. I share it here for someone who needs it.
.tree-table-row-cell {
-fx-background-color: -fx-table-cell-border-color, -fx-control-inner-background;
-fx-background-insets: 0, 0 0 1 0;
}
.tree-table-row-cell:odd {
-fx-background-color: -fx-table-cell-border-color, #F9F9F9;
-fx-background-insets: 0, 0 0 1 0;
}
.tree-table-row-cell:selected,
.tree-table-row-cell:selected:odd {
-fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-focus-color;
-fx-background-insets: 0, 1, 2;
}
.tree-table-row-cell:selected .tree-table-cell {
-fx-text-fill: white;
}
.tree-table-row-cell:empty {
-fx-background-color: transparent;
}
.tree-table-row-cell:empty .tree-table-cell {
-fx-border-width: 0px;
}

Answer 4

If you use modena.css and just want to modify your TreeTableView to look like a TableView try to use following code.
The resulting TreeTableView has/contains:
Horizontal borders
Odd rows with different colour
Same selection behaviour like TableView
CSS file:
/* Let TreeTableView rows look like TableView rows */
.tree-table-row-cell {
-fx-background-color: -fx-table-cell-border-color, -fx-background;
-fx-background-insets: 0, 0 0 1 0;
}
/* Let odd rows look different */
.tree-table-row-cell:odd {
-fx-background: -fx-control-inner-background-alt;
}
/* Selected when control is focused */
.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:selected {
-fx-background: -fx-selection-bar;
-fx-table-cell-border-color: derive(-fx-selection-bar, 20%);
}
/* Selected when control is not focused */
.tree-table-row-cell:filled:selected {
-fx-background: -fx-selection-bar-non-focused;
-fx-table-cell-border-color: derive(-fx-selection-bar-non-focused, 20%);
}