如何在智能手机上添加水平滚动条？

Question

在我的 web 项目中，我有一个 table，我在 div 上添加了一个滚动条，它围绕着 table ：

@media screen and (min-width:1000px){
    .scroll_table {
        overflow-x : scroll !important;
    }
}

因此对于移动浏览器上的响应，没有滚动条并且 table 没有完整显示（您可以在下面的图像中看到 thios）。桌面浏览器：

手机浏览器：

Answer 1

您需要在包装 table 的块元素 (div) 上声明 overflow-x 属性。您没有提供代码，所以这个通用示例将向您展示：

<div style="overflow-x: auto">
    <table>
        <caption>overflow x table</caption>
        <thead>
            <tr>
                <th>title 1</th>
                <th>title 2</th>
                <th>title 3</th>
                <th>title 4</th>
                <th>title 5</th>
                <th>title 6</th>
                <th>title 7</th>
                <th>title 8</th>
                <th>title 9</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>some data 1</td>
                <td>some data 2</td>
                <td>some data 3</td>
                <td>some data 4</td>
                <td>some data 5</td>
                <td>some data 6</td>
                <td>some data 7</td>
                <td>some data 8</td>
                <td>some data 9</td>
            </tr>
        </tbody>
    </table>
</div>

Answer 2

我在你的媒体查询中发现了一个问题。

您当前的媒体查询为 1000 像素及以上。您需要将其替换为1000px及以下。

请尝试以下CSS。

 /* @media screen and (min-width:1000px)*/ /*old*/
    @media screen and (max-width:1000px){
     .scroll_table {
       overflow-x : scroll !important;
       -webkit-overflow-scrolling: touch;
      }
   }

如何在智能手机上添加水平滚动条？

How to add a horizontal scroll bar on smartphone?

css

responsive