Как использовать CSS для стилизации границ двух соседних табличных представлений, чтобы они выглядели как единый табличный вид в JavaFX 11 (OpenJFX 11) - PullRequest
5 голосов
/ 15 апреля 2019

Вопрос новичка CSS.

Я отображаю широкий набор данных в двух смежных TableView с и двунаправленно связал их ScrollBar с, FocusModel с и SelectionModels, чтобы держать их в синхронизации.

Я сейчас пытаюсь заставить эти два TableView выглядеть как один и хотел бы иметь:

  1. Синяя рамка по умолчанию вокруг оба TableView с, когда либо TableView имеет фокус.
  2. Стандартная серая рамка вокруг оба TableView с при ни не имеет фокуса.
  3. Нет границ, где встречаются TableView s.

Как бы я это сделал?

Что-то вроде этогобыло бы здорово:

enter image description here

До сих пор я был в состоянии удалить границы "встречи", выполнив это:

tvLeft.getStyleClass().add("my-table-view-left");
tvRight.getStyleClass().add("my-table-view-right");

с CSS следующим образом:

.my-table-view-left:focused {
    -fx-background-insets: -1.4 0 -1.4 -1.4, -0.3 0 -0.3 -0.3, 1 0 1 1;
}

.my-table-view-right:focused {
    -fx-background-insets: -1.4 -1.4 -1.4 0, -0.3 -0.3 -0.3 0, 1 1 1 0;
}

Это также правильно устанавливает границу для одного TableView, когда выбрана одна из его строк.

Однако я не могу понятькак получить границу около оба TableView скогда либо имеет фокус.

Вот MVCE.Извиняюсь за его длину, но мне нужно было включить код синхронизации, чтобы иметь тестовый пример.

Я использую версии 11.0.2 OpenJDK и OpenJFX, работающие в Netbeans 10.0 в Windows 7.

MyTableViewCSS.css

/************************************************************************************************************
Trying to set the borders of the synchronised tableviews
*/
    .my-table-view-left:focused {
        -fx-background-insets: -1.4 0 -1.4 -1.4, -0.3 0 -0.3 -0.3, 1 0 1 1;
        -fx-focus-color: red;  /* for testing only */
    }

    .my-table-view-right:focused {
        -fx-background-insets: -1.4 -1.4 -1.4 0, -0.3 -0.3 -0.3 0, 1 1 1 0;
        -fx-focus-color: red;  /* for testing only */
    }

/************************************************************************************************************
The following section hides the horizontal and vertical tableview scrollbars.
They are replaced by scrollbars manually added to the form.
Source:  https://stackoverflow.com/questions/26713162/javafx-disable-horizontal-scrollbar-of-tableview
*/

.my-table-view *.scroll-bar:horizontal *.increment-button,
.my-table-view *.scroll-bar:horizontal *.decrement-button {
    -fx-background-color: null;
    -fx-background-radius: 0;
    -fx-background-insets: 0;
    -fx-padding: 0;
}

.my-table-view *.scroll-bar:horizontal *.increment-arrow, 
.my-table-view *.scroll-bar:horizontal *.decrement-arrow {
    -fx-background-color: null;
    -fx-background-radius: 0;
    -fx-background-insets: 0;
    -fx-padding: 0;
    -fx-shape: null;
}

.my-table-view *.scroll-bar:vertical *.increment-button,
.my-table-view *.scroll-bar:vertical *.decrement-button {
    -fx-background-color: null;
    -fx-background-radius: 0;
    -fx-background-insets: 0;
    -fx-padding: 0;
}

.my-table-view *.scroll-bar:vertical *.increment-arrow, 
.my-table-view *.scroll-bar:vertical *.decrement-arrow {
    -fx-background-color: null;
    -fx-background-radius: 0;
    -fx-background-insets: 0;
    -fx-padding: 0;
    -fx-shape: null;
}

Test014.java

package test014;

import java.util.Arrays;
import java.util.function.Function;
import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.application.Platform;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.geometry.Insets;
import javafx.geometry.Orientation;
import javafx.geometry.Pos;
import javafx.geometry.VPos;
import javafx.scene.Node;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.ScrollBar;
import javafx.scene.control.SelectionMode;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.TextFieldTableCell;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.ColumnConstraints;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Pane;
import javafx.scene.layout.Priority;
import javafx.stage.Stage;
import javafx.util.converter.DefaultStringConverter;

public class Test014 extends Application {

    private final ObservableList<DataModel> ol = FXCollections.observableArrayList();
    private final TableView<DataModel> tvLeft = new TableView();
    private final TableView<DataModel> tvRight = new TableView();

    //Show a tableview that should continue to use the default Modena style.  That way I'll know
    //if I've messed anything up!
    private final ObservableList<DataModel> olDefaultStyle = FXCollections.observableArrayList();
    private final TableView<DataModel> tvDefaultStyle = new TableView();

    private final ScrollBar vScroll = new ScrollBar();
    private final ScrollBar hScroll = new ScrollBar();

    private Parent createContent() {

        loadDummyData();
        createTableColumns();

        tvLeft.setItems(ol);
        tvRight.setItems(ol);

        tvLeft.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);
        tvRight.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);

        //Bi-directionally bind the selection and focus models of the two tables.
        tvLeft.selectionModelProperty().bindBidirectional(tvRight.selectionModelProperty());
        tvLeft.focusModelProperty().bindBidirectional(tvRight.focusModelProperty());
        tvLeft.getSelectionModel().selectFirst();

        vScroll.setOrientation(Orientation.VERTICAL);
        hScroll.setOrientation(Orientation.HORIZONTAL);

        tvLeft.getStyleClass().add("my-table-view");
        tvRight.getStyleClass().add("my-table-view");

        tvLeft.getStyleClass().add("my-table-view-left");
        tvRight.getStyleClass().add("my-table-view-right");

        Platform.runLater(() -> {

            Scene scene = tvLeft.getScene();
            String appStyleSheet = "MyTableViewCSS.css";
            scene.getStylesheets().add(this.getClass().getResource(appStyleSheet).toString());

            //Do the bindings necesary to synchronise the tableviews
            synchroniseTheTableViews();

        });

        //Load the tableviews in a gridpane so I can control the width of the left-hand tableview
        GridPane gp = new GridPane();
        ColumnConstraints cc1 = new ColumnConstraints();
        cc1.setPrefWidth(130D);
        cc1.setMaxWidth(130D);
        cc1.setMinWidth(130D);
        gp.getColumnConstraints().addAll(Arrays.asList(cc1));

        gp.add(tvLeft, 0, 0);
        gp.add(tvRight, 1, 0);

        GridPane.setValignment(tvLeft, VPos.TOP);
        GridPane.setVgrow(tvRight, Priority.ALWAYS);

        //Put the gridpane in a borderpane so I can then add vScroll and hScroll
        BorderPane content = new BorderPane();

        gp.prefHeightProperty().bind(content.heightProperty());
        gp.prefWidthProperty().bind(content.widthProperty());

        content.setCenter(gp);
        content.setRight(vScroll);
        content.setBottom(hScroll);

        //Add buttons to show and hide the tableview that should continue to have the default Modena style
        Button btnShowTvDefaultStyle = new Button("Show TV with default style");
        btnShowTvDefaultStyle.setOnAction(event -> {
            content.setLeft(tvDefaultStyle);
        });
        Button btnHideTvDefaultStyle = new Button("Hide TV with default style");
        btnHideTvDefaultStyle.setOnAction(event -> {
            content.setLeft(null);
        });
        HBox hb = new HBox();
        hb.setSpacing(20D);
        hb.setPadding(new Insets(20D));
        hb.setAlignment(Pos.CENTER);
        hb.getChildren().addAll(Arrays.asList(btnShowTvDefaultStyle, btnHideTvDefaultStyle));
        content.setTop(hb);

        return content;
    }

    private void synchroniseTheTableViews() {

        //Bind the first table's header row height to that of the second
        Pane header1 = (Pane) tvLeft.lookup("TableHeaderRow");
        Pane header2 = (Pane) tvRight.lookup("TableHeaderRow");
        header1.prefHeightProperty().bind(header2.heightProperty());

        //Now synchronise the scrollbars
        ScrollBar scrollBarLeftTv;
        ScrollBar scrollBarRightTv;

        for ( Node node1: tvLeft.lookupAll(".scroll-bar") ) {
            if ( node1 instanceof ScrollBar && ((ScrollBar) node1).getOrientation() == Orientation.VERTICAL ) {
                scrollBarLeftTv = (ScrollBar) node1;
                for ( Node node2: tvRight.lookupAll(".scroll-bar") ) {
                    if ( node2 instanceof ScrollBar && ((ScrollBar) node2).getOrientation() == Orientation.VERTICAL ) {

                        scrollBarRightTv = (ScrollBar) node2;
                        scrollBarRightTv.valueProperty().bindBidirectional(scrollBarLeftTv.valueProperty());
                        scrollBarRightTv.maxProperty().bindBidirectional(scrollBarLeftTv.maxProperty());
                        scrollBarRightTv.minProperty().bindBidirectional(scrollBarLeftTv.minProperty());
                        scrollBarRightTv.unitIncrementProperty().bindBidirectional(scrollBarLeftTv.unitIncrementProperty());
                        scrollBarRightTv.visibleAmountProperty().bindBidirectional(scrollBarLeftTv.visibleAmountProperty());

                        vScroll.valueProperty().bindBidirectional(scrollBarLeftTv.valueProperty());
                        vScroll.maxProperty().bindBidirectional(scrollBarLeftTv.maxProperty());
                        vScroll.minProperty().bindBidirectional(scrollBarLeftTv.minProperty());
                        vScroll.unitIncrementProperty().bindBidirectional(scrollBarLeftTv.unitIncrementProperty());
                        vScroll.visibleAmountProperty().bindBidirectional(scrollBarLeftTv.visibleAmountProperty());

                    }
                }        
            }
        }

        for ( Node node: tvRight.lookupAll(".scroll-bar") ) {
            if ( node instanceof ScrollBar && ((ScrollBar) node).getOrientation() == Orientation.HORIZONTAL ) {
                ScrollBar scrollBar = (ScrollBar) node;

                hScroll.valueProperty().bindBidirectional(scrollBar.valueProperty());
                hScroll.maxProperty().bindBidirectional(scrollBar.maxProperty());
                hScroll.minProperty().bindBidirectional(scrollBar.minProperty());
                hScroll.unitIncrementProperty().bindBidirectional(scrollBar.unitIncrementProperty());
                hScroll.visibleAmountProperty().bindBidirectional(scrollBar.visibleAmountProperty());

            }
        }

    }

    private void createTableColumns() {

        for ( int i=0; i<2; i++ ) {
            TableColumn<DataModel, String> col = createColumn(i, DataModel::field1Property);
            tvLeft.getColumns().add(col);
        }

        for ( int i=0; i<12; i++ ) {
            TableColumn<DataModel, String> col = createColumn(i, DataModel::field2Property);
            tvRight.getColumns().add(col);
        }

        for ( int i=0; i<3; i++ ) {
            TableColumn<DataModel, String> col = createColumn(i, DataModel::field1Property);
            tvDefaultStyle.getColumns().add(col);
        }

        tvDefaultStyle.setItems(olDefaultStyle);
        tvDefaultStyle.setPrefWidth(100D);
        tvDefaultStyle.setMaxWidth(100D);
        tvDefaultStyle.setMinWidth(100D);

    }

    private TableColumn<DataModel, String> createColumn (int colNum, Function<DataModel, StringProperty> property) {

        TableColumn<DataModel,String> col = new TableColumn<>("field" + colNum);
        col.setCellValueFactory(cellData -> property.apply(cellData.getValue()));       
        col.setCellFactory(TextFieldTableCell.<DataModel, String>forTableColumn(new DefaultStringConverter()));

        return col;

    }

    private void loadDummyData() {

        for ( int i=0; i<20; i++ ) {
            ol.add(new DataModel(Integer.toString(i), "a"));
        }

        for ( int i=0; i<30; i++ ) {
            olDefaultStyle.add(new DataModel(Integer.toString(i), "a"));
        }

    }

    private class DataModel {

        private final StringProperty field1;
        private final StringProperty field2;

        public DataModel(
            String field1,
            String field2
        ) {
            this.field1 = new SimpleStringProperty(field1);
            this.field2 = new SimpleStringProperty(field2);
        }

        public String getField1() {return field1.get().trim();}
        public void setField1(String field1) {this.field1.set(field1);}
        public StringProperty field1Property() {return field1;}

        public String getField2() {return field2.get().trim();}
        public void setField2(String field2) {this.field2.set(field2);}
        public StringProperty field2Property() {return field2;}


    }

    @Override
    public void start(Stage stage) throws Exception {
        stage.setScene(new Scene(createContent()));
        stage.setTitle("OpenJFX11 - Synchronise two TableViews");
        stage.setWidth(700D);
        stage.setHeight(400D);
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }

}

1 Ответ

1 голос
/ 18 апреля 2019

Я разработал, как это сделать, используя PseudoClass es, по предложению пользователя kleopatra.

Для каждого из синхронизированных TableView с я определил CSS для:

  1. Установить стиль Модены, синий, сфокусированный на всех границах, кроме границ, где TableView s "встречались".

  2. Установите модену, серый, не сфокусированный стиль на границе, где TableView s "встретились".

Затем я объявил PseudoClass для каждого из стилей границ.

Наконец, я добавил ChangeListener к focusedProperty() каждого TableView, чтобы активировать PseudoClass для обоих TableView с, когда один из них получил фокус, и для деактивации PseudoClass, когда оба потеряли фокус.

Конечный результат выглядит так:

enter image description here

Как справедливо указывает Клеопатра, здесь используется неподдерживаемая функциональность , но она работает для меня. Я также не пробовал это с редактируемыми TableView с, ни когда выбор ячейки (а не строки) установлен. Несмотря на это, я публикую фрагменты кода плюс SSCE, который содержит весь код синхронизации на случай, если они помогут кому-то еще.

CSS:

/* For the LEFT-hand tableview */
.my-table-view:left_focussed {
    /*  Apply the standard Modena focussed style to all bar the right-hand border (which is the
        border that abuts the right-hand tableview) */
    -fx-background-color: -fx-faint-focus-color, -fx-focus-color, -fx-control-inner-background;
    -fx-background-insets: -1.4 0 -1.4 -1.4, -0.3 0 -0.3 -0.3, 1 0 1 1;
    -fx-background-radius: 2, 0, 0;
    /*  Set the abutting right-hand border to grey. */
    -fx-border-width: 0 0.7 0 0;
    -fx-border-color: -fx-selection-bar-non-focused;
    -fx-border-radius: 0;

}

/* For the RIGHT-hand tableview */
.my-table-view:right_focussed {
    /*  Apply the standard Modena focussed style to all bar the left-hand border (which is the
        border that abuts the left-hand tableview) */
    -fx-background-color: -fx-faint-focus-color, -fx-focus-color, -fx-control-inner-background;
    -fx-background-insets: -1.4 -1.4 -1.4 0, -0.3 -0.3 -0.3 0, 1 1 1 0;
    -fx-background-radius: 2, 0, 0;
    /*  Set the abutting left-hand border to grey. */
    -fx-border-width: 0 0 0 0.7;
    -fx-border-color: -fx-selection-bar-non-focused;
    -fx-border-radius: 0;
}

PseudoClass декларации:

private final PseudoClass leftFocussed = PseudoClass.getPseudoClass("left_focussed");
private final PseudoClass rightFocussed = PseudoClass.getPseudoClass("right_focussed");

ChangeListener s:

tvLeft.focusedProperty().addListener((obs, wasFocused, isNowFocused) -> {
    if (isNowFocused) {
        togglePseudoClassStates(true);
    } else {
        togglePseudoClassStates(false);
    }
});

tvRight.focusedProperty().addListener((obs, wasFocused, isNowFocused) -> {
    if (isNowFocused) {
        togglePseudoClassStates(true);
    } else {
        togglePseudoClassStates(false);
    }
});

И метод togglePseudoClassStates():

private void togglePseudoClassStates(boolean requiredState) {

    //Set the tableview border style
    tvLeft.pseudoClassStateChanged(leftFocussed, requiredState);
    tvRight.pseudoClassStateChanged(rightFocussed, requiredState);

}

Вот сцена. Я использую версии 11.0.2 OpenJDK и OpenJFX, работающие в Netbeans 10.0 в Windows 7.

MyTableViewCSS.css

/************************************************************************************************************
This section defines the border style to be applied to the synchronised tableviews.
a)  For the LEFT-hand tableview that represents the "frozen" columns:
    i)  Set all bar the RIGHT border to the default Modena focussed style.
    ii) Set the RIGHT border to be the default Modena unfocussed style.
b)  For the RIGHT-hand tableview that represents the "scrollable" columns:
    i)  Set all bar the LEFT border to the default Modena focussed style.
    ii) Set the LEFT border to be the default Modena unfocussed style.
*/

/* For the LEFT-hand tableview */
.my-table-view:left_focussed {
    /*  Apply the standard Modena focussed style to all bar the right-hand border (which is the
        border that abuts the right-hand tableview) */
    -fx-background-color: -fx-faint-focus-color, -fx-focus-color, -fx-control-inner-background;
    -fx-background-insets: -1.4 0 -1.4 -1.4, -0.3 0 -0.3 -0.3, 1 0 1 1;
    -fx-background-radius: 2, 0, 0;
    /*  Set the abutting right-hand border to grey. */
    -fx-border-width: 0 0.7 0 0;
    -fx-border-color: -fx-selection-bar-non-focused;
    -fx-border-radius: 0;
}

/* For the RIGHT-hand tableview */
.my-table-view:right_focussed {
    /*  Apply the standard Modena focussed style to all bar the left-hand border (which is the
        border that abuts the left-hand tableview) */
    -fx-background-color: -fx-faint-focus-color, -fx-focus-color, -fx-control-inner-background;
    -fx-background-insets: -1.4 -1.4 -1.4 0, -0.3 -0.3 -0.3 0, 1 1 1 0;
    -fx-background-radius: 2, 0, 0;
    /*  Set the abutting left-hand border to grey. */
    -fx-border-width: 0 0 0 0.7;
    -fx-border-color: -fx-selection-bar-non-focused;
    -fx-border-radius: 0;
}

/************************************************************************************************************
This section defines the style of the selection bars for selected rows in the synchronised tableviews.
When a row in one tableview is selected or gets focus, the bi-directional bindings select and focus the
corresponding row in other tableview. To make it seem like the two tableviews are one, the default Modena
focussed style has to be set on the selection bars for both:
a)  the actual selected/focussed row;  and
b)  the row in the other tableview that's automatically selected/focussed by the bi-directional bindings.
*/

.my-table-view:selectionbar_focussed > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:selected,
.my-table-view:selectionbar_focussed > .virtual-flow > .clipped-container > .sheet > .table-row-cell .table-cell:selected
{
    -fx-background: -fx-selection-bar; 
    -fx-table-cell-border-color: derive(-fx-selection-bar, 20%);
}

/************************************************************************************************************
This section section hides the default horizontal and vertical scrollbars in the synchronised tableviews.
*/

.my-table-view:hidden_scrollbars *.scroll-bar *.increment-arrow,
.my-table-view:hidden_scrollbars *.scroll-bar *.decrement-arrow,
.my-table-view:hidden_scrollbars *.scroll-bar *.increment-button,
.my-table-view:hidden_scrollbars *.scroll-bar *.decrement-button {
    -fx-background-color: null;
    -fx-background-radius: 0;
    -fx-background-insets: 0;
    -fx-padding: 0;
    -fx-shape: null;
}

Test014.java

/*
An example of using two, synchronised TableViews to display a wide set of data where:
a)  The left-hand TableView contains the dataset's fixed (or "frozen") columns.
b)  The right-hand TableView contains the dataset's scrollable columns.

The TableViews are synchronised by bi-directionally binding their ScrollBars and selection and focus models.

The in-built ScrollBars on both TableViews are hidden with CSS.  Simultaneous scrolling of both TableViews is
achieved by manually adding vertical and horizontal ScrollBars and bi-directionally binding them to the
now-hidden TableView ScrollBars.

To then make all the components look like a single TableView:
a)  The two TableViews are added to a GridPane, which in turn is added as the centre node of a BorderPane.
b)  The manually created vertical ScrollBar is added as the right node of the BorderPane.
c)  The manually created horizontal ScrollBar is added as the bottom node of the BorderPane.

CSS is then used to:
a)  Set the borders around both TableViews (except for the borders that abut each other) to the default Modena
    blue style when either TableView has focus.
b)  Set the borders around both TableViews (except for the abutting borders) to the default Modena grey style
    when both TableViews lose focus.
c)  Set the abutting borders permanently to grey.
d)  Set the selection bars on both TableViews to the default Modena blue style when a row in either TableView
    is selected or receives focus.
e)  Set the selection bars on both TableViews to the default Modena grey style when both TableViews lose focus.

CAVEAT:  This has not been tested with editable TableViews nor with cell (rather than row) selection enabled.
*/
package test014;

import java.util.Arrays;
import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.application.Platform;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.css.PseudoClass;
import javafx.geometry.Insets;
import javafx.geometry.Orientation;
import javafx.geometry.Pos;
import javafx.geometry.VPos;
import javafx.scene.Node;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.ScrollBar;
import javafx.scene.control.SelectionMode;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.TextFieldTableCell;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.ColumnConstraints;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Pane;
import javafx.scene.layout.Priority;
import javafx.stage.Stage;
import javafx.util.converter.DefaultStringConverter;

public class Test014 extends Application {

    private final ObservableList<DataModel> ol = FXCollections.observableArrayList();
    private final TableView<DataModel> tvLeft = new TableView();
    private final TableView<DataModel> tvRight = new TableView();

    //Show a tableview that should continue to use the default Modena style.  That way I'll know
    //if I've messed anything up!
    private final ObservableList<DataModel> olDefaultStyle = FXCollections.observableArrayList();
    private final TableView<DataModel> tvDefaultStyle = new TableView();

    //Declare scrollbars that will be used to scroll the synchronised tableviews.
    private final ScrollBar vScroll = new ScrollBar();
    private final ScrollBar hScroll = new ScrollBar();

    //Declare the pseudoclasses
    private final PseudoClass leftFocussed = PseudoClass.getPseudoClass("left_focussed");
    private final PseudoClass rightFocussed = PseudoClass.getPseudoClass("right_focussed");
    private final PseudoClass selectionbarFocussed = PseudoClass.getPseudoClass("selectionbar_focussed");
    private final PseudoClass hiddenScrollBars = PseudoClass.getPseudoClass("hidden_scrollbars");

    private Parent createContent() {

        loadDummyData();
        createTableColumns();
        createTvWithDefaultStyle();

        tvLeft.setItems(ol);
        tvRight.setItems(ol);

        tvLeft.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);
        tvRight.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);

        //Bi-directionally bind the selection and focus models of the two tables.
        tvLeft.selectionModelProperty().bindBidirectional(tvRight.selectionModelProperty());
        tvLeft.focusModelProperty().bindBidirectional(tvRight.focusModelProperty());
        tvLeft.getSelectionModel().selectFirst();

        //Set the orientation of the scrollbars
        vScroll.setOrientation(Orientation.VERTICAL);
        hScroll.setOrientation(Orientation.HORIZONTAL);

        //Add the "my-table-view" styleclass to both tableviews.  This allows me to access the 
        //custom pseudoclasses needed to style the tableviews.
        tvLeft.getStyleClass().add("my-table-view");
        tvRight.getStyleClass().add("my-table-view");

        //Activate the pseudoclass to hide the default scrollbars of the synchronised tableviews
        tvLeft.pseudoClassStateChanged(hiddenScrollBars, true);
        tvRight.pseudoClassStateChanged(hiddenScrollBars, true);

        //Add listeners to detect and act on focus changes
        addListeners();

        Platform.runLater(() -> {

            Scene scene = tvLeft.getScene();
            String appStyleSheet = "MyTableViewCSS.css";
            scene.getStylesheets().add(this.getClass().getResource(appStyleSheet).toString());

            //Do the bindings necesary to synchronise the tableviews
            synchroniseTheTableViews();

        });

        //Load the tableviews in a gridpane so I can control the width of the left-hand tableview
        GridPane gp = new GridPane();
        ColumnConstraints cc1 = new ColumnConstraints();
        cc1.setPrefWidth(130D);
        cc1.setMaxWidth(130D);
        cc1.setMinWidth(130D);
        gp.getColumnConstraints().addAll(Arrays.asList(cc1));

        gp.add(tvLeft, 0, 0);
        gp.add(tvRight, 1, 0);

        GridPane.setValignment(tvLeft, VPos.TOP);
        GridPane.setVgrow(tvRight, Priority.ALWAYS);

        //Put the gridpane in a borderpane so I can then add vScroll and hScroll
        BorderPane content = new BorderPane();

        gp.prefHeightProperty().bind(content.heightProperty());
        gp.prefWidthProperty().bind(content.widthProperty());

        content.setCenter(gp);
        content.setRight(vScroll);
        content.setBottom(hScroll);

        //Add buttons to show and hide the tableview that should continue to have the default Modena style
        Button btnShowTvDefaultStyle = new Button("Show TV with default style");
        btnShowTvDefaultStyle.setOnAction(event -> {
            content.setLeft(tvDefaultStyle);
            tvDefaultStyle.requestFocus();
        });
        Button btnHideTvDefaultStyle = new Button("Hide TV with default style");
        btnHideTvDefaultStyle.setOnAction(event -> {
            content.setLeft(null);
        });
        Button btnRequestFocus = new Button("request focus");
        btnRequestFocus.setOnAction(event -> {
            tvRight.requestFocus();
        });
        HBox hb = new HBox();
        hb.setSpacing(20D);
        hb.setPadding(new Insets(20D));
        hb.setAlignment(Pos.CENTER);
        hb.getChildren().addAll(Arrays.asList(btnShowTvDefaultStyle, btnHideTvDefaultStyle, btnRequestFocus));
        content.setTop(hb);

        return content;

    }

    private void addListeners() {

        //Add a focus change listener to each of the tableviews to add or remove the border and 
        //selection bar styles when focus is gained or lost.
        tvLeft.focusedProperty().addListener((obs, wasFocused, isNowFocused) -> {
            if ( isNowFocused ) {
                togglePseudoClassStates(true);
            } else {
                togglePseudoClassStates(false);
            }
        });

        tvRight.focusedProperty().addListener((obs, wasFocused, isNowFocused) -> {
            if ( isNowFocused ) {
                togglePseudoClassStates(true);
            } else {
                togglePseudoClassStates(false);
            }
        });

        //Add a value change listener to the manually added scrollbars to request focus on one of the
        //synchronised tableviews.
        hScroll.valueProperty().addListener((obs, oldValue, newValue) -> {
            tvLeft.requestFocus();
        });

        vScroll.valueProperty().addListener((obs, oldValue, newValue) -> {
            tvLeft.requestFocus();
        });

        //Likewise, add a handler to detect any mouse action on the scrollbars and request focus
        //on one of the tableviews.
        hScroll.setOnMouseReleased(event -> {
            tvLeft.requestFocus();
        });

        vScroll.setOnMouseReleased(event -> {
            tvLeft.requestFocus();
        });

    }

    private void togglePseudoClassStates(boolean requiredState) {

        //Set the tableview border style
        tvLeft.pseudoClassStateChanged(leftFocussed, requiredState);
        tvRight.pseudoClassStateChanged(rightFocussed, requiredState);
        //Set the selection bar style
        tvLeft.pseudoClassStateChanged(selectionbarFocussed, requiredState);
        tvRight.pseudoClassStateChanged(selectionbarFocussed, requiredState);

    }

    private void synchroniseTheTableViews() {

        //Bind the first table's header row height to that of the second
        Pane header1 = (Pane) tvLeft.lookup("TableHeaderRow");
        Pane header2 = (Pane) tvRight.lookup("TableHeaderRow");
        header1.prefHeightProperty().bind(header2.heightProperty());

        //Now synchronise the scrollbars
        ScrollBar scrollBarLeftTv;
        ScrollBar scrollBarRightTv;

        for ( Node node1: tvLeft.lookupAll(".scroll-bar") ) {
            if ( node1 instanceof ScrollBar && ((ScrollBar) node1).getOrientation() == Orientation.VERTICAL ) {
                scrollBarLeftTv = (ScrollBar) node1;
                for ( Node node2: tvRight.lookupAll(".scroll-bar") ) {
                    if ( node2 instanceof ScrollBar && ((ScrollBar) node2).getOrientation() == Orientation.VERTICAL ) {

                        scrollBarRightTv = (ScrollBar) node2;
                        scrollBarRightTv.valueProperty().bindBidirectional(scrollBarLeftTv.valueProperty());
                        scrollBarRightTv.maxProperty().bindBidirectional(scrollBarLeftTv.maxProperty());
                        scrollBarRightTv.minProperty().bindBidirectional(scrollBarLeftTv.minProperty());
                        scrollBarRightTv.unitIncrementProperty().bindBidirectional(scrollBarLeftTv.unitIncrementProperty());
                        scrollBarRightTv.visibleAmountProperty().bindBidirectional(scrollBarLeftTv.visibleAmountProperty());

                        vScroll.valueProperty().bindBidirectional(scrollBarLeftTv.valueProperty());
                        vScroll.maxProperty().bindBidirectional(scrollBarLeftTv.maxProperty());
                        vScroll.minProperty().bindBidirectional(scrollBarLeftTv.minProperty());
                        vScroll.unitIncrementProperty().bindBidirectional(scrollBarLeftTv.unitIncrementProperty());
                        vScroll.visibleAmountProperty().bindBidirectional(scrollBarLeftTv.visibleAmountProperty());

                    }
                }        
            }
        }

        for ( Node node: tvRight.lookupAll(".scroll-bar") ) {
            if ( node instanceof ScrollBar && ((ScrollBar) node).getOrientation() == Orientation.HORIZONTAL ) {
                ScrollBar scrollBar = (ScrollBar) node;

                hScroll.valueProperty().bindBidirectional(scrollBar.valueProperty());
                hScroll.maxProperty().bindBidirectional(scrollBar.maxProperty());
                hScroll.minProperty().bindBidirectional(scrollBar.minProperty());
                hScroll.unitIncrementProperty().bindBidirectional(scrollBar.unitIncrementProperty());
                hScroll.visibleAmountProperty().bindBidirectional(scrollBar.visibleAmountProperty());

            }
        }

    }

    private void createTableColumns() {

        TableColumn<DataModel,String> col1 = new TableColumn<>("field1");
        TableColumn<DataModel,String> col2 = new TableColumn<>("field2");
        TableColumn<DataModel,String> col3 = new TableColumn<>("field3");
        TableColumn<DataModel,String> col4 = new TableColumn<>("field4");
        TableColumn<DataModel,String> col5 = new TableColumn<>("field5");
        TableColumn<DataModel,String> col6 = new TableColumn<>("field6");
        TableColumn<DataModel,String> col7 = new TableColumn<>("field7");
        TableColumn<DataModel,String> col8 = new TableColumn<>("field8");
        TableColumn<DataModel,String> col9 = new TableColumn<>("field9");
        TableColumn<DataModel,String> col10 = new TableColumn<>("field10");
        TableColumn<DataModel,String> col11 = new TableColumn<>("field11");
        TableColumn<DataModel,String> col12 = new TableColumn<>("field12");

        TableColumn<DataModel,?> colsGroup = new TableColumn<>("group of cols");

        col1.setCellValueFactory(cellData -> cellData.getValue().field1Property());
        col1.setCellFactory(TextFieldTableCell.<DataModel, String>forTableColumn(new DefaultStringConverter()));

        col2.setCellValueFactory(cellData -> cellData.getValue().field2Property());
        col2.setCellFactory(TextFieldTableCell.<DataModel, String>forTableColumn(new DefaultStringConverter()));

        col3.setCellValueFactory(cellData -> cellData.getValue().field3Property());
        col3.setCellFactory(TextFieldTableCell.<DataModel, String>forTableColumn(new DefaultStringConverter()));

        col4.setCellValueFactory(cellData -> cellData.getValue().field4Property());
        col4.setCellFactory(TextFieldTableCell.<DataModel, String>forTableColumn(new DefaultStringConverter()));

        col5.setCellValueFactory(cellData -> cellData.getValue().field5Property());
        col5.setCellFactory(TextFieldTableCell.<DataModel, String>forTableColumn(new DefaultStringConverter()));

        col6.setCellValueFactory(cellData -> cellData.getValue().field4Property());
        col6.setCellFactory(TextFieldTableCell.<DataModel, String>forTableColumn(new DefaultStringConverter()));

        col7.setCellValueFactory(cellData -> cellData.getValue().field5Property());
        col7.setCellFactory(TextFieldTableCell.<DataModel, String>forTableColumn(new DefaultStringConverter()));

        col8.setCellValueFactory(cellData -> cellData.getValue().field4Property());
        col8.setCellFactory(TextFieldTableCell.<DataModel, String>forTableColumn(new DefaultStringConverter()));

        col9.setCellValueFactory(cellData -> cellData.getValue().field4Property());
        col9.setCellFactory(TextFieldTableCell.<DataModel, String>forTableColumn(new DefaultStringConverter()));

        col10.setCellValueFactory(cellData -> cellData.getValue().field4Property());
        col10.setCellFactory(TextFieldTableCell.<DataModel, String>forTableColumn(new DefaultStringConverter()));

        col11.setCellValueFactory(cellData -> cellData.getValue().field4Property());
        col11.setCellFactory(TextFieldTableCell.<DataModel, String>forTableColumn(new DefaultStringConverter()));

        col12.setCellValueFactory(cellData -> cellData.getValue().field4Property());
        col12.setCellFactory(TextFieldTableCell.<DataModel, String>forTableColumn(new DefaultStringConverter()));

        colsGroup.getColumns().addAll(Arrays.asList(col4, col5, col6, col7, col8));

        tvLeft.getColumns().addAll(Arrays.asList(col1, col2));
        tvRight.getColumns().addAll(Arrays.asList(col3, colsGroup, col9, col10, col11, col12));

    }

    private void createTvWithDefaultStyle() {

        TableColumn<DataModel,String> colDefaultStyle1 = new TableColumn<>("f1");
        TableColumn<DataModel,String> colDefaultStyle2 = new TableColumn<>("f2");
        TableColumn<DataModel,String> colDefaultStyle3 = new TableColumn<>("f3");

        colDefaultStyle1.setCellValueFactory(cellData -> cellData.getValue().field1Property());
        colDefaultStyle1.setCellFactory(TextFieldTableCell.<DataModel, String>forTableColumn(new DefaultStringConverter()));

        colDefaultStyle2.setCellValueFactory(cellData -> cellData.getValue().field2Property());
        colDefaultStyle2.setCellFactory(TextFieldTableCell.<DataModel, String>forTableColumn(new DefaultStringConverter()));

        colDefaultStyle3.setCellValueFactory(cellData -> cellData.getValue().field3Property());
        colDefaultStyle3.setCellFactory(TextFieldTableCell.<DataModel, String>forTableColumn(new DefaultStringConverter()));

        tvDefaultStyle.getColumns().addAll(Arrays.asList(colDefaultStyle1, colDefaultStyle2, colDefaultStyle3));

        tvDefaultStyle.setItems(ol);
        tvDefaultStyle.setPrefWidth(80D);
        tvDefaultStyle.setMaxWidth(80D);
        tvDefaultStyle.setMinWidth(80D);

    }

    private void loadDummyData() {

        ol.add(new DataModel("1", "a", "1", "2", "z"));
        ol.add(new DataModel("2", "a", "2", "3", "z"));
        ol.add(new DataModel("3", "a", "3", "5", "z"));
        ol.add(new DataModel("4", "a", "4", "9", "z"));
        ol.add(new DataModel("5", "a", "5", "3", "z"));
        ol.add(new DataModel("6", "a", "6", "4", "z"));
        ol.add(new DataModel("7", "a", "7", "8", "z"));
        ol.add(new DataModel("8", "a", "8", "7", "z"));
        ol.add(new DataModel("9", "a", "9", "1", "z"));
        ol.add(new DataModel("10", "a", "10", "6", "z"));
        ol.add(new DataModel("11", "a", "11", "0", "z"));
        ol.add(new DataModel("12", "a", "12", "3", "z"));
        ol.add(new DataModel("13", "a", "13", "4", "z"));
        ol.add(new DataModel("14", "a", "14", "2", "z"));
        ol.add(new DataModel("15", "a", "15", "9", "z"));
        ol.add(new DataModel("16", "a", "16", "4", "z"));
        ol.add(new DataModel("17", "a", "17", "5", "z"));
        ol.add(new DataModel("18", "a", "18", "0", "z"));
        ol.add(new DataModel("19", "a", "19", "1", "z"));
        ol.add(new DataModel("20", "a", "20", "6", "z"));

        olDefaultStyle.add(new DataModel("A", "1", "20", "6", "z"));
        olDefaultStyle.add(new DataModel("B", "2", "20", "6", "z"));
        olDefaultStyle.add(new DataModel("C", "3", "20", "6", "z"));

    }

    private class DataModel {

        private final StringProperty field1;
        private final StringProperty field2;
        private final StringProperty field3;
        private final StringProperty field4;
        private final StringProperty field5;

        public DataModel(
            String field1,
            String field2,
            String field3,
            String field4,
            String field5
        ) {
            this.field1 = new SimpleStringProperty(field1);
            this.field2 = new SimpleStringProperty(field2);
            this.field3 = new SimpleStringProperty(field3);
            this.field4 = new SimpleStringProperty(field4);
            this.field5 = new SimpleStringProperty(field5);
        }

        public String getField1() {return field1.get().trim();}
        public void setField1(String field1) {this.field1.set(field1);}
        public StringProperty field1Property() {return field1;}

        public String getField2() {return field2.get().trim();}
        public void setField2(String field2) {this.field2.set(field2);}
        public StringProperty field2Property() {return field2;}

        public String getField3() {return field3.get().trim();}
        public void setField3(String field3) {this.field3.set(field3);}
        public StringProperty field3Property() {return field3;}

        public String getField4() {return field4.get().trim();}
        public void setField4(String field4) {this.field4.set(field4);}
        public StringProperty field4Property() {return field4;}

        public String getField5() {return field5.get().trim();}
        public void setField5(String field5) {this.field5.set(field5);}
        public StringProperty field5Property() {return field5;}

    }

    @Override
    public void start(Stage stage) throws Exception {
        stage.setScene(new Scene(createContent()));
        stage.setTitle("OpenJFX11 - Synchronise two TableViews");
        stage.setWidth(600D);
        stage.setHeight(400D);
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }

}
...