perfect scroll bar is not working for table

I am able to see the scrollbar but unable to scroll the content in the div.

The scroll bar is visible but unable to scroll the content I have attached screenshot of how the scroll bar is rendered.

screenshot.png

<div style="height:auto;width:777px;overflow:hidden;margin-left:0px;" id="ios_mdata" class="contentHolder">
    <table class="table table-bordered table-hover table-condensed"  style="margin-left:23px;">
        <thead>
            <tr>
                <th>Version</th>
                <th>App Type</th>
                <th>File Size(MB)</th>
                <th>Release Date</th>
                <th>Minimum OS</th>
                <th>Avg. User Rating</th>
                <th>User Rating Count</th>
                <th>Last Updated</th>
                <th>View in Store</th>
            </tr>
        </thead>
        <tbody>
            <tr>
              <td>5.3</td>
              <td>universal</td>
              <td>12382700.0</td>
              <td>2010-11-05</td>
              <td>7.0</td>
              <td>2</td>
              <td>2</td>
              <td>2015-08-03</td>
              <td>link</td> 
            </tr>
        </tbody>
    </table>
</div>
<style type="text/css">
  .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: scroll; }
  .contentHolder .content { width: 1280px; height: 620px; }
  .table { width: 1200px; }
  .spacer { text-align:center }
  .table-bordered {
    border-collapse: collapse;
  }
</style>
<script type="text/javascript">
    $("#ios_mdata").perfectScrollbar()
</script>

via Chebli Mohamed