Oam Psy Oam Psy - 7 months ago 25
HTML Question

HTML table with fixed/left column and scrollable body?

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>


CSS:

.outter {
width: 70%;
}

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


Here's my fiddle: http://jsfiddle.net/oampz/QW97X/2/

Answer

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/