javascript - Single scroll for 2 same layouts in different div? -

i have 2 divs table structure on page. want make them responsive , way put horizontal scroll after point .the divs in different wrappers/container can't move them in single wrapper. my problem want 1 horizontall scroll rather two. best way this? have 1 scroll move both horizontally.

below trying (the issue)

* {    margin: 0px;    padding: 0px;  }    .scrollwrapper1 {    width: 100%;    overflow-x: auto;    overflow-y: hidden;    float: left;  }  .scrollwrapper2 {    width: 100%;    overflow-x: auto;    overflow-y: hidden;    float: left;  }    .tablehead {    width: 100%;    overflow: hidden;    float: left;  }    .row {    float: left;    width: calc(10% - 1px);    text-align: center;    border-right: 1px solid #ccc  }    .margintop40 {    margin-top: 40px;  }    .scrollwrapper h1 {    margin: 20px 0;  }    @media(max-width:1024px) {    .tablehead {      width: 1024px;      overflow: hidden    }  }

<div class="scrollwrapper1">  <h1>div on page table format</h1>    <div class="tablehead">      <div class="row">table 1</div>      <div class="row">table 1</div>      <div class="row">table 1</div>      <div class="row">table 1</div>      <div class="row">table 1</div>      <div class="row">table 1</div>      <div class="row">table 1</div>      <div class="row">table 1</div>      <div class="row">table 1</div>      <div class="row">table 1</div>      </div>    </div>    <div class="scrollwrapper2 margintop40">    <h1>another div on page table format</h1>    <div class="tablehead">      <div class="row">table 2</div>      <div class="row">table 2</div>      <div class="row">table 2</div>      <div class="row">table 2</div>      <div class="row">table 2</div>      <div class="row">table 2</div>      <div class="row">table 2</div>      <div class="row">table 2</div>      <div class="row">table 2</div>      <div class="row">table 2</div>        </div>    </div>

get scroll left of scrolling div , bind other div

$('.scrollwrapper').on('scroll', function(){    var _left = $(this).scrollleft();    $('.scrollwrapper').scrollleft(_left)  })

* {    margin: 0px;    padding: 0px;  }    .scrollwrapper {    width: 100%;    overflow-x: auto;    overflow-y: hidden;    float: left;  }    .tablehead {    width: 100%;    overflow: hidden;    float: left;  }    .row {    float: left;    width: calc(10% - 1px);    text-align: center;    border-right: 1px solid #ccc  }    .margintop40 {    margin-top: 40px;  }    .scrollwrapper h1 {    margin: 20px 0;  }    @media(max-width:1024px) {    .tablehead {      width: 1024px;      overflow: hidden    }  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="scrollwrapper">  <h1>div on page table format</h1>    <div class="tablehead">      <div class="row">table 1</div>      <div class="row">table 1</div>      <div class="row">table 1</div>      <div class="row">table 1</div>      <div class="row">table 1</div>      <div class="row">table 1</div>      <div class="row">table 1</div>      <div class="row">table 1</div>      <div class="row">table 1</div>      <div class="row">table 1</div>      </div>    </div>    <div class="scrollwrapper margintop40">    <h1>another div on page table format</h1>    <div class="tablehead">      <div class="row">table 2</div>      <div class="row">table 2</div>      <div class="row">table 2</div>      <div class="row">table 2</div>      <div class="row">table 2</div>      <div class="row">table 2</div>      <div class="row">table 2</div>      <div class="row">table 2</div>      <div class="row">table 2</div>      <div class="row">table 2</div>        </div>    </div>