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

Question

我想要一个固定头的桌子,以便身体的其余部分可滚动.问题是我需要用materializeCss表来完成它.

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

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

这是我正在使用的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{})