在小型设备上发布带有固定标题的实现表

Question

我有一个特定的CSS来获取固定的标头和可滚动表（实体化框架），但是当切换到小屏幕（标头在实体化的响应表模式下变为行）时，标头就不会与行对齐。 我注意到它在移除时变得对齐

   height: calc(100vh - 300px );

处于响应模式的表格效果很好，但是在台式机/移动版中，我都需要将表格保持在屏幕的一部分。

有人可以提出修复建议吗？

codepen

我的CSS如下：

 table {
    font-size: 10px;
    width: 100%;
    table-layout: fixed;
    }

    .scroll {
    border: 0;
    border-collapse: collapse;
    }    
    .scroll tr {
    display: flex;
    }    
    .scroll td {
    flex: 1;
    }    
    .scroll thead tr:after {
    overflow-y: scroll;
    visibility: hidden;
    height: 0;
    }    
    .scroll thead th {
    flex: 1;
    display: block;
    }    
    .scroll tbody {
    display: block;

    overflow-y: auto;
    height: calc(100vh - 300px );
    }