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

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, contenttoffset, delegate。更多详细信息请查看此链接。

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