我想将 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 .但是,它仍然无法响应。
如果有人帮助解决这个问题,我将不胜感激。
最佳答案
请使用这个 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;
}
关于html - 在响应表中固定到底部时,Tfoot 宽度未对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58779110/