Бутстрап 4 Ревизор таблицы, горизонтальный и вертикальный прокрутки

Я использую загрузочные таблицы с Angular 6 в проекте, и мне удалось создать вертикальную таблицу прокрутки с этим кодом:

<table class="table table-striped table-bordered" style="margin-bottom: 0">
      <thead> <!-- Column names -->
        <tr>
          <th scope="col">#</th>
          <th scope="col">Col 1</th>
          <th scope="col">Col 2</th>
          <th scope="col">Col 3</th>
          ...
          <th scope="col">Col N</th>
        </tr>
      </thead>
      <tbody> <!-- Data -->
        <tr>
          <th scope="row">1</th>
          <td>AAAAA</td>
          <td>BBBBB</td>
          <td>CCCCC</td>
          ...
          <td>DDDDD</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>AAAAA</td>
          <td>BBBBB</td>
          <td>CCCCC</td>
          ...
          <td>DDDDD</td>
        </tr>
        ...
        <tr>
          <th scope="row">n</th>
          <td>AAAAA</td>
          <td>BBBBB</td>
          <td>CCCCC</td>
          ...
          <td>DDDDD</td>
        </tr>
      </tbody>
    </table>

И css:

  tbody {
      display:block;
      max-height:500px;
      overflow-y:auto;
  }
  thead, tbody tr {
      display:table;
      width:100%;
      table-layout:fixed;
  }
  thead {
      width: calc( 100% - 1em )
  } 

Но теперь, если есть много столбцов, это выглядит не очень хорошо.

Итак, я тоже хотел добавить горизонтальную прокрутку, поэтому я мог бы прокручивать всю таблицу горизонтально и только тело таблицы по вертикали. Для выполнения горизонтальной прокрутки, которую я использовал. table-responseive:

<div class="table-responsive">
    <table class="table table-striped table-bordered" style="margin-bottom: 0">
    ...
    </table>
</div>

Но он работает только без элемента вертикальной прокрутки в css.

Я хочу объединить эти два способа для прокрутки таблицы. Я изменил значения ширины в части css, от 100% до статических значений пикселей, таких как:

...
thead, tbody tr {
      display:table;
      width: 2000px;
      table-layout:fixed;
  }
  thead {
      width: calc( 2000px - 1em )
  } 

И это сработало, но мне нужно установить статическую ширину, и я не знаю, как это сделать динамически (в зависимости от количества colu mns).

body {
  --table-width: 100%; /* Or any value, this will change dinamically */
}
tbody {
  display:block;
  max-height:500px;
  overflow-y:auto;
}
thead, tbody tr {
  display:table;
  width: var(--table-width);
  table-layout:fixed;
}

<div class="table-responsive">
    <table class="table table-striped table-bordered" style="margin-bottom: 0">
    ...
    </table>
</div>

calculateTableWidth() {
  // Get the table container width:
  const pageWidth = document.getElementById('tableCard').offsetWidth;
  // Get the longest column name
  const longest = this.tableColumns.sort(function (a, b) { return b.length - a.length; })[0];
  // Calculate table width
  let tableWidth = this.tableColumns.length * longest.length * 14;
  // If the width is less than the pageWidth
  if (tableWidth < (pageWidth - 10)) {
    // We set tableWidth to pageWidth - scrollbarWidth (10 in my project)
    tableWidth = pageWidth - 10;
  }
  // Then we update the --table-width variable:
  document.querySelector('body').style.cssText = '--table-width: ' + tableWidth + 'px';
}

ngOnInit() {
  this.tableColumns = this.myAppService.getTableColumnsNames();
  this.calculateTableWidth();
}@HostListener('window:resize', ['$event'])
onResize(event: any) {
  this.calculateTableWidth();
}