Angular-6-datatables响应样式

Question

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

1. 当表包含5条以上的记录时，想添加垂直滚动条（overflow-y : auto）。
2. 分页现在也包含页码，但只想添加“下一个”，“上一个”按钮
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