角度 6 数据表响应式样式

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 [ngStyle]="{'height':(mf?.data?.length > 5) ? '200px' : 'auto'}">

全局样式.scss

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

堆栈闪电战演示 🌾

这是我使用的示例scss