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

Question

div在我的网络项目中，我有一个表格，我在表格周围添加了一个滚动条：

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

因此，对于移动浏览器上的响应式浏览器，没有滚动条，表格也没有全部显示（您可以在下图中看到 thios）。桌面浏览器：

手机浏览器：

标签： cssresponsive

Answer 1

您需要在包装表格的块元素 (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>