html - 表体、表头重叠且表宽未扩展

Question

我使用 ngtable 在 angularjs 中创建了一个应用程序，因为我需要固定表头 我尝试使用 position:fixed; 以便表头固定，但问题是现在正文和头重叠， table 的宽度也没有扩大

我的代码如下

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

你必须删除#myTable thead 中的position fixed

并删除显示: block ；在.scrollArea.