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>

.outter {

width: 70%;

}



.countries {

tr {

    td {            

        height: 50px;

        font-size: 11px;

        text-align: center;

        vertical-align: middle;

        font-weight: normal;

    }

}

}