Javascript HTML在表格顶部的div中滚动

我正在尝试创建一个具有固定标题的表。其思想是制作两个表（一个用于标题，一个用于“正文”）。表格应该可以垂直和水平滚动。因此，我创建了一个div，它应该位于用户正在滚动的表的顶部，而不是两个不同步的表（如果用户在其中一个表中水平滚动，则标题与正文不匹配）

我的代码如下所示：

CSS

HTML

总目1
总目1
总目1
总目1
总目1
总目1
总目1
总目1
总目1
总目1
总目1
总目1
总目1
总目1
总目1
总目1
总目1
总目1
总目1
总目1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1
正文1

这在电脑上运行得很好，但当我在Smarthphone或Ipad上使用它时，我无法通过在桌子上滑动来水平滚动桌子，因为当我在桌子上滑动时，我无法“触及”div，因为桌子位于div的顶部（“环绕”）

---

所以我的问题是：如何使这两个表不可滚动，而只使div“Wrap”可滚动？（看起来用户正在表格中滚动）

那么您想要一个向左和向右滚动的数据表格，并且数据向上滚动，使标题列可见吗？还要调查

thead

和

tbody

标记。如果您愿意使用jQuery，这里有一个插件：

.scroll{
     overflow:auto;

}
.wrap {
margin: 0px auto;
 overflow-x:scroll;
overflow-y:scroll;
 position: absolute;
    top: 0;
left: 0;
 width: 100%;
height: 100%;
z-index:1000;
 }

 .wrap table {
width: 4000px;
     table-layout: fixed;
 }

 table tr td {
padding: 5px;
border: 1px solid #eee;
width: 100px;
word-wrap: break-word;
  }

 table.head tr td {
background: #eee;
  }

  .inner_table {
height: 200px;
width: 4000px;
overflow-y: scroll;
overflow-x: auto;
 }

  <div class="scroll">
  <div class="wrap">
<table class="head">
    <tr>
        <td>Head 1</td>
        <td>Head 1</td>
        <td>Head 1</td>
            <td>Head 1</td>
        <td>Head 1</td>
        <td>Head 1</td>
                    <td>Head 1</td>
        <td>Head 1</td>
        <td>Head 1</td>
                    <td>Head 1</td>
        <td>Head 1</td>
        <td>Head 1</td>
                    <td>Head 1</td>
        <td>Head 1</td>
        <td>Head 1</td>
                                <td>Head 1</td>
        <td>Head 1</td>
        <td>Head 1</td>
                    <td>Head 1</td>
        <td>Head 1</td>
    </tr>
</table>
<div class="inner_table">
    <table>

            <tr>
        <td>Body 1</td>
        <td>Body 1</td>
        <td>Body 1</td>
                    <td>Body 1</td>
        <td>Body 1</td>
        <td>Body 1</td>
                    <td>Body 1</td>
        <td>Body 1</td>
        <td>Body 1</td>
                    <td>Body 1</td>
        <td>Body 1</td>
        <td>Body 1</td>
                    <td>Body 1</td>
        <td>Body 1</td>
        <td>Body 1</td>
                    <td>Body 1</td>
        <td>Body 1</td>
                    <td>Body 1</td>
        <td>Body 1</td>
        <td>Body 1</td>
    </tr>

            <tr>
        <td>Body 1</td>
        <td>Body 1</td>
        <td>Body 1</td>
                    <td>Body 1</td>
        <td>Body 1</td>
        <td>Body 1</td>
                    <td>Body 1</td>
        <td>Body 1</td>
        <td>Body 1</td>
                    <td>Body 1</td>
        <td>Body 1</td>
        <td>Body 1</td>
                    <td>Body 1</td>
        <td>Body 1</td>
        <td>Body 1</td>
                    <td>Body 1</td>
        <td>Body 1</td>
                    <td>Body 1</td>
        <td>Body 1</td>
        <td>Body 1</td>
    </tr>
            <tr>
        <td>Body 1</td>
        <td>Body 1</td>
        <td>Body 1</td>
                    <td>Body 1</td>
        <td>Body 1</td>
        <td>Body 1</td>
                    <td>Body 1</td>
        <td>Body 1</td>
        <td>Body 1</td>
                    <td>Body 1</td>
        <td>Body 1</td>
        <td>Body 1</td>
                    <td>Body 1</td>
        <td>Body 1</td>
        <td>Body 1</td>
                    <td>Body 1</td>
        <td>Body 1</td>
                    <td>Body 1</td>
        <td>Body 1</td>
        <td>Body 1</td>
    </tr>

    <!-- Some more tr's -->
</table>
</div>
</div>

</div>