具有固定/左列和可滚动主体的 HTML 表格？

Question

我正在尝试创建一个占据屏幕宽度 70% 的简单表格。但是，如果表格中的内容溢出了表格的 70%，那么表格应该可以水平滚动。

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%;
}

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

这是我的 fiddle :http://jsfiddle.net/oampz/QW97X/2/

Answer 1

为 .countries 表指定 width 为 100% 并将 overflow: auto 添加到 .outter div.

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

fiddle :http://jsfiddle.net/QW97X/4/