如何赋予表格主体固定高度300px并使行滚动？ ng2-smart-table

问题描述

我有大约700行表数据。目前，我每页显示50行（已实现分页）。 单击分页中的“下一个按钮”时，将加载接下来的50行。我想要实现的是给表主体设置一个固定的高度，以便可见约20行，其余30行可以滚动到视图中。

我曾尝试使用以下CSS代码来实现。它可以工作，但会破坏整个ng2-smart-table布局：

tbody {
  display: block;
  width: 100%;
  height: calc( 70vh - 200px );
  overflow-y: scroll;
}

代码：

角度代码。

<ng2-smart-table
  [settings]="settings"
  [source]="allItemsBasicDetails"
  (userRowSelect)="onRowSelect($event)"
  (custom)="onCustomAction($event)">
</ng2-smart-table>

TS：

 public settings = {
    sort: true,attr: {
      class: "table table-bordered",},pager: {
      display: true,perPage: 30,actions: {
      add: false,edit: false,delete: false,custom: null,position: "right"
    },columns: data,// Reason: Check the comment for this class in global src/scss/styles.scss
    rowClassFunction: (row: any) => {
      let classList = "ng2-custom-actions-only";
      classList += (row.data.IsActive ? " ng2-custom-action-disable":" ng2-custom-action-enable");
      return classList;
    }
  };

请使用任何虚拟数据生成表或（http://ergast.com/api/f1/2004/1/results.json）

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）