Question

我创建了一个具有可滚动区域的简单HTML表。

虽然桌面看起来和桌面/笔记本电脑的功能正常，但当我在移动设备（例如iPhone）上查看桌面时，滚动条不可见。

在移动设备和平板电脑上查看时，如何确保滚动条可见？

HTML：

<div ng-app="">
<div ng-controller="EventController">
<div class="outter">
    <table class="countries">
        <tbody>
            <tr>
                <th>Country name</th>
                <td ng-repeat="countryNames in Countries">{{countryNames.countryName}}</td>
            </tr>
            <tr>
                <th>Population</th>
                <td ng-repeat="population in Countries">{{ population.countryName }}</td>
            </tr>
        </tbody>
    </table>
</div>
</div>
</div>

CSS：

.outter {
    width: 70%;
    overflow: auto;
}
.countries {
    width: 100%;

    tr {
        td {
            height: 50px;
            font-size: 11px;
            text-align: center;
            vertical-align: middle;
            font-weight: normal;
        }
    }
}

这是一个小提琴：http://jsfiddle.net/QW97X/4/

Answer 1

在IOS中，您必须导入一些滚动属性。喜欢重要属性contentSize，contentInset，contentOffset，delegate。有关详细信息，请查看此链接。

http://www.tutorialspoint.com/ios/ios_ui_elements_scrollview.htm

具有可滚动主体的HTML表 - 在移动设备上不可滚动

1 个答案: