How to merge the HTML structure of two tables?

Question

I can't get this kind of table merging. These tables are tied. And when I scroll one of that second has to be stable.

This code doesn't work: https://jsfiddle.net/Shengelia/kx5oojo4/

<table class="table-centered table table-bordered">
    <thead class="table-head">
        <tr>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>1</th>
            <th>1</th>
            <th>1</th>
            <th>
                <table cellspacing="0" cellpadding="0" border="0" width="325">
                    <tr>
                        <td>
                            <div style="width:320px; height:80px; overflow:auto;">
                                <table cellspacing="0" cellpadding="1" border="1" width="300" >
                                    <tr>
                                        <td>new item</td>
                                        <td>new item</td>
                                    </tr>
                                    <tr>
                                        <td>new item</td>
                                        <td>new item</td>
                                    </tr>
                                    <tr>
                                        <td>new item</td>
                                        <td>new item</td>
                                    </tr>
                                    <tr>
                                        <td>new item</td>
                                        <td>new item</td>
                                    </tr>
                                    <tr>
                                        <td>new item</td>
                                        <td>new item</td>
                                    </tr>
                                    <tr>
                                        <td>new item</td>
                                        <td>new item</td>
                                    </tr>
                                </table>
                            </div>
                        </td>
                    </tr>
                </table>
            </th>
        </tr>
    </tbody>
</table>

How should I merge these two tables and make them tied? Like here?

Answer 1

Try It Once

.main{
  width:100%;
  height:200px;
  border:1px solid red;
 
}
.left{
  width:50%;
  float:left;
  height:100%;
  overflow:hidden;
}
.right{
  width:50%;
  float:left;
  height:100%;
  overflow:auto;
}

<div class="main">
<div class="left">
  <table style="width:100%; border:1px solid;">
   <tr height="50"><td>1</td></tr>
    <tr height="50"><td>2</td></tr>
    <tr height="50"><td>3</td></tr>
    <tr height="50"><td>4</td></tr>
   </table>
  </div>
 <div class="right">
  <table style="width:100%; border:1px solid; overflow:auto;">
   <tr height="50"><td>A</td></tr>
    <tr height="50"><td>B</td></tr>
    <tr height="50"><td>C</td></tr>
    <tr height="50"><td>D</td></tr>
    <tr height="50"><td>E</td></tr>
    <tr height="50"><td>F</td></tr>
    <tr height="50"><td>G</td></tr>
   </table>
  </div>
</div>