html - 表格主体、头部重叠和表格宽度未扩大

Question

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

我的代码如下

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中的位置

并删除 display: block; 在 .scrollArea 中。

Answer 2

添加单元格填充以更改表格的宽度。并将顶部/底部添加到标题以解决重叠问题。