Tfoot width misaligned when fixed to bottom in a responsive table - html

Question

I want to fix the tfoot to the bottom of the page with it being as responsive as the rows of the table.
My code: https://codepen.io/adu8/pen/MWWXqGY
The problem I face now is once I add the class="fixed-bottom" to the tr of tfoot, it goes to bottom and gets misaligned.
I tried fixing it with having a workaround by adding this css:
tfoot td {
display: inline-block;
width: calc((100%/8) - 10px);
}
As in this codepen: https://codepen.io/adu8/pen/dyyKqOv. However, it's still not able to be as responsive.
I would appreciate if someone helps fixing this.

Answer 1

Please use this CSS
body {
background-color: midnightblue;
color: white;
}
table {
max-width: 100%;
font-size: 2vw;
}
thead, tr, tfoot {
text-align: center;
background-color: midnightblue;
}
.table-striped>tbody>tr:nth-child(odd)>td,
.table-striped>tbody>tr:nth-child(odd)>th {
background-color: darkslateblue;
}
.table-hover tbody tr:hover > th {
/*background-color: #06765d;*/
background-color: #009999;
}
.table td {
padding: 0.05rem;
margin: 0px;
}
.fixed-bottom {
width: 100%;
}
table tr {
display: flex; display: -webkit-flex;
width: 100%;
}
tr th,
tr td {
width: calc(100% / 8);
}
tr th:first-child,
tr td:first-child {
width: 22%;
flex-shrink: 0;
-webkit-flex-shrink: 0;
}