Html t固定在响应式工作台底部时，脚掌宽度未对齐

我想将tfoot固定到页面底部，使其响应性与表中的行一样

我的代码：

我现在面临的问题是，一旦我将class=“fixed bottom”添加到tfoot的tr中，它就会降到底部，并且没有对齐。 我尝试通过添加以下css来解决此问题：

tfoot td {
display: inline-block;
width: calc((100%/8) - 10px);
}

如此代码笔中所示：。然而，它仍然不能像以前那样响应

如果有人能帮我解决这个问题，我将不胜感激。

请使用这个CSS

正文{
背景色：午夜蓝；
颜色：白色；
}
桌子{
最大宽度：100%；
字体大小：2vw；
}
thead，tr，tfoot{
文本对齐：居中；
背景色：午夜蓝；
}
.表格带条纹>tbody>tr:n子项（奇数）>td，
.表格带条纹>T正文>tr:N子项（奇数）>第{
背景色：深蓝色；
}
.table hover t车身tr:hover>th{
/*背景色：#06765d*/
背景色：#009999；
}
.表td{
填充：0.05雷姆；
边际：0px；
}
.固定底部{
宽度：100%；
}
表tr{
显示：flex；显示：-webkit flex；
宽度：100%；
}
tr th，
tr td{
宽度：计算值（100%/8）；
}
tr th：第一个孩子，
tr td：第一个孩子{
宽度：22%；
弹性收缩：0；
-webkit flex收缩：0；
}

请使用此CSS

正文{
背景色：午夜蓝；
颜色：白色；
}
桌子{
最大宽度：100%；
字体大小：2vw；
}
thead，tr，tfoot{
文本对齐：居中；
背景色：午夜蓝；
}
.表格带条纹>tbody>tr:n子项（奇数）>td，
.表格带条纹>T正文>tr:N子项（奇数）>第{
背景色：深蓝色；
}
.table hover t车身tr:hover>th{
/*背景色：#06765d*/
背景色：#009999；
}
.表td{
填充：0.05雷姆；
边际：0px；
}
.固定底部{
宽度：100%；
}
表tr{
显示：flex；显示：-webkit flex；
宽度：100%；
}
tr th，
tr td{
宽度：计算值（100%/8）；
}
tr th：第一个孩子，
tr td：第一个孩子{
宽度：22%；
弹性收缩：0；
-webkit flex收缩：0；
}