MaterializeCss Table с фиксированным заголовком и выровненным содержимым столбца

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; (удалить авто и выравнивает отлично).

---

Кроме того, если вам нужно голову, чтобы быть идеально выровнены с телом (там будет небольшое смещение за счет скроллинга, просто добавьте padding-right свойство thead tr{}, который соответствует ширине полосы прокрутки)