html - 将第二个全长行添加到垫表中的每个垫行

标签 html css angular angular-material

我有一个包含 4-5 列的 mat-table,但我想在每行下显示另一个属性作为“描述”。我不想按此属性排序或过滤。结果应该如下所示:

Column1       Column2        Column3
------------------------------------------------
Row1Value1    Row1Value2     Row1Value3
Row1ValueDescription that is 3 columns long
------------------------------------------------
Row2Value1    Row2Value2     Row2Value3
Row2ValueDescription that is 3 columns long
------------------------------------------------

这可以用 mat-table 实现吗?还是我必须使用 html 表? 我尝试像这样添加一个 div,但这只是被 ngcontainers 覆盖了:

   <mat-row *matRowDef="let element; columns: contentDisplayedColumns">
      <div>element.description</div>
   </mat-row>

最佳答案

可以按照docs example中的方式进行操作。唯一的区别是使行始终可见。例如。将 [class.example-expanded-row]="expandedElement === element" 更改为 [class.example-expanded-row]="true"

关于html - 将第二个全长行添加到垫表中的每个垫行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71663450/

相关文章:

javascript - 如何检查哪个表格单元格触发了一个 Action JavaScript

Angular 2/Ionic 2 TypeError : zxcvbn_1. 默认不是函数

javascript - jQuery 合并 appendTo 行(如果存在)

html - rails 5/ Bootstrap 4 : My Navbar Displays a Mobile Dropdown Menu on Desktop

css - 如何包含 float 在容器 div 之外的 div

css - 为什么 li 中的 float 项会在其他缩放级别用 chrome 包裹?

html - 声明忽略 parent 填充的背景

angular - 使用动态对象数据在 Angular 模板中显示对象数据

html - 突出显示不透明的部分

html - 负边距在 IE9 中不起作用