$('#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; }