如何合并两个表的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

尝试一次

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;