我有一個100%寬度的div，包含一個表格。表格寬度取決于單元格寬度，并且必須大于div寬度。

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

例如，行的寬度可以是300像素(因為是100%)，td的固定寬度可以是200像素。

在這種情況下，我需要在div區域內水平滾動整個表格。

寫這個

.row {
    overflow-x: scroll;
}

在pc上完成所有工作(使用觸摸板水平滾動)。但當我從手機瀏覽器訪問時，無法滾動。

我也試過-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">

預先感謝

如果您使用bootstrap。你可以用。表響應。

用下面的類將表包裝在一個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;
}

100 %意味著相對于父元素，其他所有內容都將在其中滾動

tr {
    overflow-x: scroll;
}

你可以在td上加上必要的寬度