Question

我正在使用PrimeNG 4.1.0-rc.2。

我正在尝试创建的是具有固定标头的数据表。即使我将表格滚动到底部（如stackoverflow顶部的固定菜单），标题也应始终可见。

我尝试了scrollable的{{1}}和scrollHeight属性，但桌面上有一个滚动条。我不需要它，因为我已经有一个整页。我还尝试用p-dataTable修复它，但表头和表内容的大小不同。

任何帮助都将不胜感激。

现在我有这样的事情：http://embed.plnkr.co/bnB2ZDvDPZos3JLMmVFe/ 已启用position: fixed选项，scrollable已注释掉。

Answer 1

我找到了解决方案，我应该position: sticky使用scrollable。以下是一个示例：http://embed.plnkr.co/jZJ3it0ARLLYSe0zI6DL/

也许这对任何人都有帮助。

编辑：最后还有另一个解决方案。在组件中：

private isScrolled: boolean = false;
constructor(private renderer: Renderer) {
    window.onscroll = () => {
        this.zone.run(() => {
             var header = document.getElementsByClassName('ui-datatable-scrollable-header')[0];
             this.isScrolled = window.pageYOffset > 35; // there is another sticky on the top in my app
             this.renderer.setElementClass(header, 'header_scrolled', this.isScrolled);
        });
    }
}

和CSS：

.header_scrolled {
    position: fixed !important;
    top: 60px; 
}

Answer 2

您也可以将下面的代码放入@Component

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css'],
  styles: [`
  :host ::ng-deep .ui-table .stk {
      position: -webkit-sticky;
      position: sticky;
      top: 0px;
      z-index: 9999;
  }
  :host ::ng-deep .margTop {
    position: -webkit-sticky;
    position: sticky;
    top: 52px;
    z-index: 9999;
  }

`],

我的HTML标头是这样的：

<tr>
                <th class="stk" rowspan="2" style="width:60px;">Field.</th>
                <th class="stk" rowspan="2" style="width:200px;">Field</th>
                <th class="stk" rowspan="2" style="width:135px;">Field</th>
                <th class="stk" rowspan="2" style="width:105px;">Field</th>
                <th class="stk" rowspan="2">Field</th>
                <th class="stk" rowspan="2" style="width:105px;">Field</th>
                <th class="stk" colspan="2"><p class="text-center">Field</p></th>
                <th class="stk" colspan="2"><p class="text-center">Field</p></th>
                <th class="stk" rowspan="2">Field</th>
                <th class="stk" rowspan="2">Field</th>
                <th class="stk" rowspan="2" style="width:60px;">Field</th>
            </tr>
            <tr>
                <th class="margTop">Field</th>
                <th class="margTop">Field</th>
                <th class="margTop">Field</th>
                <th class="margTop">Field</th>
            </tr>

修复了primeng DataTable中的标题

2 个答案: