html - 在响应表中固定到底部时，Tfoot 宽度未对齐

Question

我想将 tfoot 固定在页面底部，使其与表格的行一样响应。

我的代码:https://codepen.io/adu8/pen/MWWXqGY

我现在面临的问题是，一旦我将 class="fixed-bottom"添加到 tfoot 的 tr 中，它就会到达底部并错位。我尝试通过添加此 css 来解决此问题:

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

如本代码笔中所示:https://codepen.io/adu8/pen/dyyKqOv .但是，它仍然无法响应。

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

Answer 1

请使用这个 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;
}