editable jquery tree table with scrollbars

HTML

<script src="http://ludo.cubicphuse.nl/jquery-treetable/jquery.treetable.js"></script>
<link rel="stylesheet" href="http://ludo.cubicphuse.nl/jquery-treetable/css/screen.css">
<link rel="stylesheet" href="http://ludo.cubicphuse.nl/jquery-treetable/css/jquery.treetable.css">
<link rel="stylesheet" href="http://ludo.cubicphuse.nl/jquery-treetable/css/jquery.treetable.theme.default.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css">
<div style="width:500px; height:900px; overflow-x:scroll; overflow-y:scroll">
<table id="example-basic">
    <caption>Basic jQuery treetable Example</caption>
    <thead>
        <tr>
            <th>Variable</th>
            <th>Type</th>
            <th>Value</th>
        </tr>
    </thead>
    <tbody>
        <tr data-tt-id="1">
            <td>this</td>
            <td>java.lang.Object</td>
            <td>java.lang.Object@fefefe</td>
        </tr>
        <tr data-tt-id="1.1" data-tt-parent-id="1">
            <td>i</td>
            <td>int</td>
            <td>
                <input value="1" />
            </td>
        </tr>
        <tr data-tt-id="1.2" data-tt-parent-id="1">
            <td>msg</td>
            <td>java.lang.String</td>
            <td>
                <input value="That's it!" />
            </td>
        </tr>
        <tr data-tt-id="1.2.1" data-tt-parent-id="1.2">
            <td>value</td>
            <td>char[]</td>
            <td>That's it!</td>
        </tr>
        <tr data-tt-id="2" data-tt-branch="true">
            <td>restart</td>
            <td>boolean</td>
            <td>
                <input value="true" />
            </td>
        </tr>
    </tbody>
</table>
</div>

CSS

td {
    font-family: monospace;
    font-size: 12px;
    white-space:nowrap;
}
input {
    font-size: 12px;
    margin: 0px;
    padding: 0px;
    border: 1px dotted #999;
    border-radius: 0;
    -webkit-appearance: none;
}

table.treetable {
    
      margin: .6em 0 0 0!important;
}

JavaScript

$("#example-basic").treetable({
    expandable: true,
    // handle auto load on expand
    onNodeExpand: function () {
        var node = this;
        console.log("expand", node);

        // update and add children as needed via ajax
        //$("tr[data-tt-id='"+node.id+"']").after('<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>');

        // remove data-tt-branch
        if (node.children.length == 0) {
            node.row.removeData("ttBranch");
            node.row.removeAttr("data-tt-branch");
            node.row.removeClass("expanded")
        }
    }
});

// Highlight selected row
$("#example-basic tbody").on("mousedown", "tr", function () {
    $(".selected").not(this).removeClass("selected");
    $(this).toggleClass("selected");
});