Material table 具有粘性 header 和响应列

Question

有没有办法让 material table 具有粘性 header 并且列响应？我在 material 文档中找到了这个例子：https://stackblitz.com/angular/paddnlmnavx?file=src%2Fapp%2Ftable-sticky-complex-flex-example.css

我的问题是 header 宽度是固定的，使用单元格的宽度计算：

min-width: 1920px; /* 24 columns, 80px each */

如果我想让列响应，那么我将为列设置一个动态宽度，如果我从 header 中删除 min-width，header 行将具有宽度为 100%，不会包含所有 header 个单元格。

Answer 1

解决此问题的一种方法是使用 @media query。您可以根据屏幕尺寸更改 min-width，您将拥有响应列。

你可以这样做：

.mat-header-row,
.mat-footer-row,
.mat-row {
  min-width: 1920px;
}

@media (max-width: 1200px) {
  .mat-header-row,
  .mat-footer-row,
  .mat-row {
    min-width: 2500px;
  }
}

@media (max-width: 992px) {
  .mat-header-row,
  .mat-footer-row,
  .mat-row {
    min-width: 3000px;
  }
}

@media (max-width: 768px) {
  .mat-header-row,
  .mat-footer-row,
  .mat-row {
    min-width: 4000px;
  }
}

这是更新后的示例：https://stackblitz.com/edit/angular-k6repx-qpnjoa?file=src/app/table-sticky-complex-flex-example.css

Answer 2

尝试使用此代码结构使angular materialtableheader成为粘性

<tr mat-header-row *matHeaderRowDef="headerdata" sticky></tr>

将 sticky 关键字添加到 <tr mat-header-row> 标签。此更改将适用于 angular 6.2.3+ 版本。

Answer 3

<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true">

您可以在 this page

上找到更多详细信息

Material table 具有粘性 header 和响应列

Material table with sticky header and responsive columns

css

material-design

angular-material

angular