html - 具有固定头部和对齐列内容的 MaterializeCss 表

Question

我正在尝试获得一个头部固定的表格，以便主体的其余部分可以滚动。问题是我需要用 materializeCss Table 来完成它.

我可以做到这一点，而且我已经做到了，但是每个解决方案都会使具有不同字符的表列未对齐，请检查此图像:

这个有边框所以你可以看到问题:

这是我正在使用并产生所述结果的 CSS(scroll 类在表中):

.scroll {
  border: 0;
  border-collapse: collapse;
}    
.scroll tr {
  display: flex;
}    
.scroll td {
  flex: 1 auto;
}    
.scroll thead tr:after {
  overflow-y: scroll;
  visibility: hidden;
  height: 0;
}    
.scroll thead th {
  flex: 1 auto;
  display: block;
}    
.scroll tbody {
  display: block;
  overflow-y: auto;
  height: calc(80vh - 100px);
}

我的问题:如何使用固定头部对齐内容并具体化？

Answer 1

经过一些测试我明白了，基本上如果你使用和我一样的 CSS，你只需要将 flex: 1 auto; 属性替换为 flex: 1;(删除汽车，它完美对齐)。

---

此外，如果你需要头部与 body 完美对齐(由于滚动条会有一个小的偏移量，只需添加一个 padding-right 属性到 thead tr{ } 匹配滚动条宽度)