1

我在这篇文章底部的代码控制着<div>我<div>在 jQuery Mobile 中的页面。我有这个 div 来制作表格滚动，因为它在页面上水平溢出。但是，它显示在此屏幕截图中：

表格占页面的约 50%，然后滚动

当它垂直放置时也会出现同样的问题，但这个视图更好地说明了它。我也横向滚动了 div 以更好地说明两个边界。我希望 div 在移动设备上简单地填充页面的整个宽度，因为它可以在更大的屏幕上正确显示，但我希望它在溢出时水平滚动。除了尝试使用和不overflow: scroll;使用. 我尝试过设置宽度的任何方法都没有奏效，包括其他地方所建议的。overflow: auto;-webkit-overflow-scrolling: touch;width: 100%;position: absolute; left: 0; right: 0;

CSS：

@media only screen and (min-width: 1025px){
    .ui-page {
    width: 960px !important;
    margin: 0 auto !important;
    position: relative !important;
        border-right: 5px #111111 outset !important;
        border-left: 5px #111111 outset !important;
        border-bottom: none;
    }
}

@media only screen and (max-width: 1024px){
    .tblscroll {
        width: 100%;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
    }
}

简化的 HTML：

<div data-role="page" id="resultsmain" data-title="Survey Results">
    <div data-role="header"><h1>Title</h1></div>
    <div data-role="content">text
        <div class="tblscroll">
            <table>
                ...table information...
            </table>
        </div>
    </div>
</div>
4

3 回答 3

1

您可以尝试在 div 元素宽度定义的宽度周围使用 CSS 显示块并调整百分比。

于 2013-03-19T14:58:18.053 回答
0

看起来好像是桌子本身就是问题所在。

我会将表格宽度设置为 100%，并修复不会增长或缩小的行

表{宽度：100%；}

于 2013-03-19T15:04:40.473 回答
0

这根本没有真正的帮助，但我今天加载它并且它运行良好。从昨天到今天，我没有改变任何东西，所以它一定是某种缓存问题（即使我已经清除了我的移动缓存）。

于 2013-03-20T17:45:45.553 回答