Question

我有一个表响应但不在移动设备上工作。我只看到前两列，它没有显示滚动条。如果我在大屏幕上调整浏览器大小，它确实有效。我怎么能解决这个问题？我有：

<div class="table-responsive" >
  <table class="table">
    <thead>
                <tr>
                  <th>Product</th>
                  <th>Description</th>
                  <th>Price</th>
                  <th>Remove from WH</th>
                </tr>
        </thead>
        <tbody>    
        {% for item in wh %}
        <tr>
            <td>{{ item.product }}</td>
            <td>{{ item.description }}</td>
            <td>$ {{ item.price }} </td>
            <td>
            <form action="" method="POST">{%csrf_token%}
                <button type="submit" class="btn btn-default btn-sm" value="{{item.itemid}}" name="ii"><span class="glyphicon glyphicon-trash"></span>
                <input type="hidden" value="{{item.itemid}}" name="ii"> </button>
            </form>
            </td>
        </tr>
        {% endfor %}

        </tbody>
        <tfoot>
            <tr>
            <td></td>
            <td></td>
            <td>Total</td>
            <td>$ {{ sum }}</td>
            </tr>
        </tfoot>
    </table>       
  </div>

根据bootstrap文档，它应该可以工作，但事实并非如此。感谢

@media (max-width: 768px) {
.table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-x: scroll;
overflow-y: hidden;
border: 1px solid #dddddd;

-ms-overflow-style: -ms-autohiding-scrollbar; 
-webkit-overflow-scrolling: touch !important;         
 } }

我已经在Android 2.3.3，Safari和Dolphin浏览器上进行了测试

Answer 1

请检查您的代码，这可能是溢出隐藏的问题。

Bootstrap 3表响应不在移动设备上滚动

1 个答案: