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

100 % is meant to be relative to parent element and everything else would be scrolled inside of it

tr {
    overflow-x: scroll;
}

and you can put necessary width on td

Answer 2

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

Answer 3

  <table style="border: 1px solid;">
    <tr style="background-color: #eee;">
      <td>Name</td>
      <td>DOB</td>
      <td>Gender</td>
      <td>Age</td>
      <td>Weight</td>
      <td>Grade</td>
      <td>Address</td>
      <td>City</td>
      <td>village</td>
      <td>Mobile</td>
      <td>Email</td>
    </tr>
    <tr>
      <td>Abc</td>
      <td>01-jan-2000</td>
      <td>Male</td>
      <td>23</td>
      <td>50</td>
      <td>A++</td>
      <td>xyz</td>
      <td>Pqr</td>
      <td>efg</td>
      <td>9876543210</td>
      <td>[email protected]</td>
    </tr>
  </table>
</div>