Table body, head overlaps and width of the table is not expanding

Question

I have created an application in angularjs using ngtable, since I need the table head to be fixed I tried using position:fixed; so that the head is fixed but the problem is that now the body and head overlaps also the width of the table is not expanding

My code is as given below

JSFiddle

html

<div ng-controller="IndexCtrl">
    <table border="1" ng-table="mytable" id="myTable" class="ScrollArea">
        <tbody ng-repeat="peop in $groups">
            <tr ng-repeat="people in peop.data">
                <td sortable="id" data-title="'Id'">{{people.id}}</td>
                <td sortable="desig" data-title="'Desig'">{{people.desig}}</td>
                <td sortable="name" data-title="'Name'">{{people.name}}</td>
                <td sortable="place" data-title="'Place'">{{people.place}}</td>
            </tr>
        </tbody>
    </table>
</div>

css

#myTable thead
{
    position:fixed;
}
.ScrollArea
{
    display: block;
    height: 200px;
    overflow-y: scroll;
}

Answer 1

you have to remove position fixed in #myTable thead

and remove display: block; in .scrollArea.

Answer 2

Add cellpadding to change width of the table. and add top/bottom to the thead to solve the overlap.