Scrolling horizontally on mobile

Question

I have a div with 100% width containing a table. Table width depending on cell width and must be greater than div width.

<div class="row">
    <table>
       <tr><td></td><td></td></tr>
    </table>
</div>

For example the width of row could be 300px (because of 100%), and the fixed width of a td could be 200px.

In this case I need the full table scroll horizontally inside div area.

Writing this

.row {
    overflow-x: scroll;
}

make all work on pc (scrolling with touchpad horizontally). But when i make access from a mobile browser is not possible to scroll.

I've also tried -webkit-overflow-scrolling: touch but seems to be not recognized by browsers (both chrome and opera).

Any idea on how to solve?

Also I put below some head informations that can be usefull for solving

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

Thanks in advance

Answer 1

If you are using bootstrap. You can use .table-responsive.

Wrap the table inside a div with this class like below:

<div class="table-responsive">
  <table> 
     <tr>
       <td>1</td>
       <td>2</td>
       <td>3</td>
     </tr>
  </table>
</div>

This is the class definition:

.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}