How to make a Table resizable in JavaFX? - javafx

Question

In my UI, there is a webView and below that is a table to record some actions in the webView. They are placed one below the other. I want the table below to be resizable. The table is fixed to left, right and below borders. User should be able to drag it up. Just like the inspect element opens up a window below the browser and user can drag it up to view more content.
How can I do this in JavaFX? Please help.
Update:
I tried the below:
HBox.setHgrow(table, Priority.ALWAYS);
VBox.setVgrow(table, Priority.ALWAYS);
None of them had any effects. In scenebuilder, I'm binding the table to bottom, left and right borders.
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.web.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<AnchorPane prefHeight="400.0" prefWidth="720.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.controller.RecordController">
<children>
<WebView fx:id="webView" layoutX="80.0" layoutY="48.0" prefHeight="204.0" prefWidth="720.0" AnchorPane.bottomAnchor="156.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="40.0" />
<TableView fx:id="table" editable="true" layoutY="244.0" prefHeight="156.0" prefWidth="626.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
<columns>
<TableColumn fx:id="stepDescription" prefWidth="152.0" sortable="false" text="STEP DESCRIPTION" />
<TableColumn fx:id="stepType" prefWidth="85.0" sortable="false" text="STEP TYPE" />
<TableColumn fx:id="pageName" prefWidth="86.0" sortable="false" text="PAGE NAME" />
<TableColumn fx:id="objectName" prefWidth="102.0" sortable="false" text="OBJECT NAME" />
<TableColumn fx:id="actionName" prefWidth="108.0" sortable="false" text="ACTION NAME" />
<TableColumn fx:id="testData" prefWidth="109.0" sortable="false" text="TEST DATA" />
</columns>
<columnResizePolicy>
<TableView fx:constant="CONSTRAINED_RESIZE_POLICY" />
</columnResizePolicy>
</TableView>
<GridPane prefHeight="42.0" prefWidth="579.0">
<children>
<Button fx:id="go" layoutX="261.0" layoutY="20.0" mnemonicParsing="false" prefHeight="32.0" text="Go" AnchorPane.topAnchor="20.0" GridPane.columnIndex="2" />
<TextField fx:id="url" layoutX="97.0" layoutY="20.0" prefHeight="32.0" AnchorPane.topAnchor="20.0" GridPane.columnIndex="1" />
<Label layoutX="56.0" layoutY="24.0" prefHeight="32.0" text="URL" AnchorPane.topAnchor="24.0" GridPane.halignment="RIGHT">
<GridPane.margin>
<Insets right="5.0" />
</GridPane.margin>
</Label>
</children>
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" maxWidth="101.0" minWidth="0.0" prefWidth="46.0" />
<ColumnConstraints hgrow="SOMETIMES" maxWidth="515.0" minWidth="10.0" prefWidth="483.0" />
<ColumnConstraints hgrow="SOMETIMES" maxWidth="177.0" minWidth="10.0" prefWidth="50.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints minHeight="10.0" vgrow="SOMETIMES" />
</rowConstraints>
</GridPane>
<Button fx:id="saveButton" layoutX="663.0" layoutY="5.0" mnemonicParsing="false" onAction="#save" prefHeight="32.0" prefWidth="32.0" AnchorPane.rightAnchor="15.0" />
<Button fx:id="clear" layoutX="634.0" layoutY="5.0" mnemonicParsing="false" onAction="#clear" prefHeight="32.0" prefWidth="32.0" AnchorPane.rightAnchor="55.0" />
<ProgressIndicator fx:id="progress" layoutX="565.0" layoutY="1.0" progress="0.0">
<padding>
<Insets top="10.0" />
</padding>
</ProgressIndicator>
</children>
</AnchorPane>