I am trying to create a simple table that consumes 70% of the screens width. however, if the content inside the table overflows the 70% table, then the table should be horizontally scrollable.
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>
.outter {
width: 70%;
}
.countries {
tr {
td {
height: 50px;
font-size: 11px;
text-align: center;
vertical-align: middle;
font-weight: normal;
}
}
}
Give the .countries
table a width
of 100%
and add overflow: auto
to .outter
div.
.outter {
width: 70%;
overflow: auto;
}
.countries {
width: 100%;
}
Fiddle: http://jsfiddle.net/QW97X/4/