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;
}

why you don't try using ui-grid(ng-grid)?http://ui-grid.info/ — huan feng, Dec 09 '14 at 07:40

score 1 · Answer 1 · answered Dec 09 '14 at 07:37

1

you have to remove position fixed in #myTable thead

and remove display: block; in .scrollArea.

answered Dec 09 '14 at 07:37

then i cant set theheight to table, also the sticky header http://jsfiddle.net/ghjc22as/2/ – Alex Man Dec 09 '14 at 07:40

score 0 · Answer 2 · answered Dec 09 '14 at 09:39

0

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

answered Dec 09 '14 at 09:39

TM Dinesh

210
3
13

can you just give me a jsfiddle – Alex Man Dec 09 '14 at 09:51
http://jsfiddle.net/TMDineshUID/ghjc22as/8/ im trying this in another way.is it okay to you? – TM Dinesh Dec 09 '14 at 10:49

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

2 Answers2