title: MaterializeCss Table with fixed head and aligned column content
body: <p>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 <a href="http://materializecss.com/table.html" rel="nofollow noreferrer">materializeCss Table</a> .</p>
  
  <p>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:
  <a href="https://i.stack.imgur.com/rJEi7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rJEi7.png" alt="unaligned content"></a></p>
  
  <p>This one has the borders so you can see the problem:</p>
  
  <p><a href="https://i.stack.imgur.com/nAh4o.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nAh4o.png" alt="with border"></a>
  This is the CSS that i'm using and produces said result(the <code>scroll</code> class is in the table):</p>
  
  <pre><code>.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);
  }
  </code></pre>
  
  <p>My question: <strong>How to align the content by column WITH fixed head and materialize?</strong></p>