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

Question

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

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

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

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

Написание этого

.row {
    overflow-x: scroll;
}

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

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

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

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

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

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

Answer 1

Если вы используете загрузчик. Ты можешь использовать .table-responsive,

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

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

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

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

Answer 2

        <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>[e-mail]</td>
    </tr>
  </table>
</div>

Answer 3

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

tr {
    overflow-x: scroll;
}

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