Прокрутка по горизонтали на мобильном телефоне

Question

У меня есть div со 100% шириной, содержащей таблицу. Ширина таблицы зависит от ширины ячейки и должна быть больше ширины div.

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

Например, ширина строки может быть 300px (из-за 100%), и фиксированной ширины тд может быть 200px.

В этом случае мне нужна полная таблица прокрутки по горизонтали внутри области div.

написания этой

.row { 
    overflow-x: scroll; 
} 

загаданного все работы на компьютере (прокрутка с сенсорной панелью по горизонтали). Но когда я делаю доступ из мобильного браузера, прокручивание невозможно.

Я также пробовал -webkit-overflow-scrolling: touch, но, похоже, не распознается браузерами (как хром, так и опера).

Любая идея о том, как ее решить?

Также я ставлю ниже некоторую информацию головы, которая может быть полезна для решения

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

Заранее спасибо

Answer 1

100% предназначается, чтобы быть относительно родительского элемента и все остальное будет прокручиваться внутри него

tr { 
    overflow-x: scroll; 
} 

и вы можете поместить необходимую ширину на TD

Answer 2

Если вы используете бутстрап. Вы можете использовать .table-responsive.

Wrap таблица внутри DIV с этим классом, как показано ниже:

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

Это определение класса:

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