MaterializeCss Table 具有固定的头部和对齐的列内容

Question

我正在尝试获得一个带有固定头部的 table，以便 body 的其余部分可以滚动。问题是我需要用 materializeCss Table 完成它。

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

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

这是我正在使用并产生上述结果的 CSS（scroll class 在 table 中）：

.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和它完美对齐）。

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

MaterializeCss Table 具有固定的头部和对齐的列内容

MaterializeCss Table with fixed head and aligned column content

html

css

materialize

css-tables