sheia sheia - 2 months ago 5
HTML Question

Need help in html structure of two merged tables

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?
enter image description here

Answer

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>