HTML table with fixed/left column and scrollable body?

Question

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/

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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/

HTML table with fixed/left column and scrollable body?

Sign up