Edit in JSFiddle

$('#table-data-wrap').on('scroll', function() {
    $('#table-head-wrap').scrollTop($(this).scrollTop());
});

<div class="layout-content">
    <div id="table-head-wrap" class="table-head-wrap">
        <div class="table-head">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui saepe iure neque sit, dolores quisquam aliquam odio numquam ipsam architecto quos quam aliquid! Quam ipsum amet accusantium quod voluptates corporis.
        </div>
    </div>

    <div id="table-data-wrap" class="table-data-wrap">
        <div class="table-data">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi mollitia temporibus, quidem culpa, aspernatur dolore harum id illum expedita nam laudantium asperiores, quam. Odit ducimus alias, esse tenetur accusantium nam.
        </div>
    </div>
</div>

* {
    box-sizing: border-box;
}

.layout-content {
    width: 700px;
    height: 400px;
    position: relative;
}

.table-head-wrap {
    width: 200px;
    height: 385px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

.table-head {
    width: 200px;
    height: 800px;
    padding: 10px;
    background-color: #ccc;
}

.table-data-wrap {
    width: 500px;
    height: 400px;
    overflow: scroll;
    position: absolute;
    top: 0;
    left: 0;
    padding-left: 200px;
    z-index: 5;
}

.table-data {
    width: 1000px;
    height: 800px;
    padding: 10px;
    background-color: #aaa;
}