Angular-6-datatables отзывчивые стили

Question

Я использую angular-6-datatable, как показано ниже, здесь я хочу добавить несколько функций, связанных со стилем.

1. Хотите добавить вертикальную полосу прокрутки (overflow-y : auto), когда таблица содержит более 5 записей.
2. Также нумерация страниц теперь содержит номера страниц, но вместо этого нужно добавитьтолько Next, Previous кнопки
3. В таблице нижний колонтитул и записи на странице должны отображаться в одной строке.

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

Что я пробовал:

Я попробовал этот стиль из https://codepen.io/yavuzselim/pen/LNYrBd, но он не работает должным образом.

Answer 1

это 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'}">

global style.scss

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

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

демонстрация стекаблиц ?

этот пример я использую scss

Answer 2

пожалуйста, посмотрите на код: - https://stackblitz.com/edit/angular-45fkpy