Angular-6-datatables响应式设计

Question

我使用angular-6-datatable如下所示，这里我想添加一些与样式相关的功能。

1. 想要在表包含超过5条记录时添加垂直滚动条（overflow-y : auto）。
2. 同样，分页现在包含页码，但是只想添加Next，Previous按钮
3. 在表格页脚中，每页的分页和记录应显示在同一行中。

https://stackblitz.com/edit/angular-swegc6?file=src%2Fapp%2Fapp.component.ts

我尝试过的：

我从https://codepen.io/yavuzselim/pen/LNYrBd尝试了这种造型，但它没有按预期工作。

Answer 1

请看一下代码： - https://stackblitz.com/edit/angular-45fkpy

Answer 2

这是表的css

table{

  display: block;
  width: 100%;
  background-color: #f3f3f3;

  thead { background:#ff5500}

  thead,tbody , tr{
    width: 100%;
    display:block;
    overflow: auto;
  }

  th,td { 
    display: inline-block;
    overflow: hidden;
  }

}

这个你可以如何设置tbody的高度

  <tbody [ngStyle]="{'height':(mf?.data?.length > 5) ? '200px' : 'auto'}">

global style.scss

ul:first-of-type:not(.pull-right) {
  li {
    display: none;
  }

  li:first-of-type , li:last-of-type{
    display: inline-block;
  }
}

stackblitz demo 🌾

这个例子我使用scss