HTML scroll in a div on top of a table

Question

I'm trying to create a table, which has a fixed header. The idea is to make two tables (one for the header and one for the "body"). And the table should be scrollable both vertically and horizontally. So I created a div that should be on top of the table which the user are scrolling on ,instead of the two tables which wont be synced(The header wont match the body if the user scroll horizontally in one of the tables).

My code looks like this:

CSS

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

HTML

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

This works pretty well on computer, but when I'm using it on a Smarthphone or Ipad I cant scroll the table horizontally by swiping on the table, since when I swipe in the table I can't "reach" the div since the table is on top of the div ("Wrap").

So my question is: How do I make the two tables unscrollable and only make the div "Wrap" scrollable? (Which will look like the user is scrolling in the table)