具有固定头部和对齐列内容的MaterialiseCss表

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;（删除auto并且它完全对齐）。

此外，如果您需要将头部与身体完美对齐（由于滚动条会有一个小偏移，只需将padding-right属性添加到与{滚动条宽度相匹配的thead tr{} ）