Scrolling the outer div horizontally while scrolling the inner div in ipad safari

See more:

CSS

HTML

jQuery

Hello friends

I am developing a fixed header table for this i used the css trick by making two divs one is outer div and one is inner div.The outer div has Horizontal scrolling and the inner div has
vertical scrolling. This is working fine in all browser on windows machine. But i am facing a problem for IPAD

In IPAD when i try to scroll it horizontally by touching inner div it doesn't scroll horizontally.
This scroll fine when i scroll by header part of outer div.

<div id="outer" style="overflow-x:scroll;overflow-y:hidden">
<table id="header"><tr><td>header</td></tr></table>
<div id="inner" style="overflow-y:scroll;overflow-x:hidden">
<table id="content"><tr><td>content</td></tr></table>
</div>
</div>

Please suggest some solution for this

Thanks You