Bootstrap 4 表格响应，水平和垂直滚动

Question

我在一个项目中使用带有 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-responsive 这样的：

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

但它只能在 css 中没有垂直滚动部分的情况下工作。

我想结合这两种方式来滚动表格。我将 css 部分的宽度值从 100% 更改为静态 px 值，如下所示：

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

它有效，但我需要设置静态宽度，我不知道如何动态执行此操作（取决于列数）。

Answer 1

我这样修复它：首先我编辑了 css，然后删除了该 thead部分，并在正文中添加了一些内容，如下所示：

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;
}

我也离开了.table-responsivediv：

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

然后我--table-width根据列数和最长列名的长度进行计算。我在我的组件 .ts 中使用 Angular 执行此操作：

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';
}

我需要calculateTableWidth()在开始时运行ngOnInit()（或者当我定义了 tableColumns 数组时），然后在调整窗口大小时运行：

ngOnInit() {
  this.tableColumns = this.myAppService.getTableColumnsNames();
  this.calculateTableWidth();
}

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

这就是我解决这个问题的方法。现在我有一个漂亮的表格，可以垂直和水平滚动。