Angular + Bootstrap 具有可扩展行的表格

Question

在我当前的项目中，由于在 *ngFor 指令中生成并且数据来自后端，我有一个具有可变数量的列和行的 table。由于这个原因以及单元格中可能有很多文本的事实，会出现溢出并且无法显示所有列。我最初通过将溢出包装到一个新行来解决它，但是因为它可能有很多文本，所以有些行可能太大了。

我的想法是在隐藏溢出的地方显示某种预览（类似于 overflow: ellipsis 但行可以展开以显示所有信息。这样，行将具有合理的大小，但是所有信息都可以显示。数据存储在一个对象中，列名是string[]，数据是string[][]。

<div class="table-responsive">
<table class="table  table-bordered table-striped table-hover table-condensed">
  <thead>
    <tr>
      <th *ngFor="let name of data.columnNames">{{name}}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of data.data">
      <td *ngFor="let item of row">
        {{item}}
      </td>
    </tr>
  </tbody>
</table>

你们会怎么做？

Answer 1

您可以让 table 带有溢出的省略号，然后单击该行您可以打开一个显示所有数据的模式，以改善所有屏幕分辨率下的用户体验。

Angular + Bootstrap 具有可扩展行的表格

Angular + Bootstrap Tables with expandable rows

html

css

responsive-design

angular