Как объединить структуру HTML из двух таблиц?

Question

Я не могу слить этот вид таблицы. Эти таблицы привязаны. И когда я прокручиваю одну из этих секунд, она должна быть стабильной.

Этот код не работает: 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> 

Как следует объединить эти две таблицы и сделать их привязали? Как здесь?

Answer 1

разок попробовать

.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>