MaterializeCss Table with fixed head and aligned column content

I am trying to get a table with a fixed head so that the rest of the body is scrollable. The thing is I need it to be done with materializeCss Table .

I can achieve this and I've done so, however every solution that does it makes the table columns with different chars be unaligned, check this image:

This one has the borders so you can see the problem:

This is the CSS that i'm using and produces said result(the scroll class is in the 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);
}

My question: How to align the content by column WITH fixed head and materialize?