Défilement horizontal sur mobile

Question

J'ai un div avec 100% de largeur contenant une table. La largeur de la table dépend de la largeur de la cellule et doit être supérieure à la largeur div.

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

Par exemple, la largeur de la rangée pourrait être 300px (en raison de 100%), et la largeur fixe d'un td pourrait être 200px.

Dans ce cas, j'ai besoin de faire défiler horizontalement la table entière à l'intérieur de la zone div.

La rédaction de ce

.row { 
    overflow-x: scroll; 
} 

faire tous les travaux sur pc (défilement avec pavé tactile horizontalement). Mais quand je fais l'accès à partir d'un navigateur mobile n'est pas possible de faire défiler.

J'ai également essayé -webkit-overflow-scrolling: le toucher mais ne semble pas être reconnu par les navigateurs (chrome et opéra).

Une idée sur la façon de résoudre?

Aussi je mets ci-dessous quelques informations de tête qui peuvent être utiles pour résoudre

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

Merci à l'avance

Answer 1

100% est censé être par rapport à l'élément parent et tout le reste se défile à l'intérieur de celui-ci

tr { 
    overflow-x: scroll; 
} 

et vous pouvez mettre la largeur nécessaire sur td

Answer 2

Si vous utilisez le bootstrap. Vous pouvez utiliser .table-responsive.

Enveloppez la table dans un div avec cette classe comme ci-dessous:

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

Ceci est la définition de classe:

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