Css 带有粘性标题和响应列的物料表

有没有一种方法可以使物料表具有粘性标题和响应性列？我在材料文档中找到了以下示例：

我这里的问题是页眉宽度是固定的，使用单元格的宽度计算：

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

---

如果我想使列响应，那么我将为列设置一个动态宽度，如果我从标题中删除最小宽度，标题行的宽度将为100%，并且不会包含所有标题单元格。

解决此问题的一种方法是使用

@media query

。您可以根据屏幕大小更改

最小宽度

，您将拥有响应列

您可以这样做：

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

---

下面是更新后的示例：

尝试使用此代码结构使角材质表格标题具有粘性

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

在

标记中添加

粘性

关键字。这一更改将在angular 6.2.3+版本中生效。

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

---

你可以找到更多关于你到底需要什么的详细信息？？你能详细说明你想要实现什么吗？