html - 将表页脚固定到页面底部，同时保持列的大小正确

示例 html:

<html>
  <style>
    .footer-fixed { 
      position: fixed; 
      bottom: 0px; left: 20px;
      width: calc(100% - 40px); 
    }
  </style>
  <table>
    <thead>
      <tr>
        <th colspan="2"></th>
        <th class="border-left text-center" colspan="2">Full Example 20'</th>
        <th class="border-left text-center" colspan="2">Full Example 40'</th>
        <th class="border-left text-center" colspan="2">Total Full Examples TEU</th>
        <th class="border-left text-center" colspan="2">Full Something 20'</th>
        <th class="border-left text-center" colspan="2">Full Something 40'</th>
        <th class="border-left text-center" colspan="2">Total Full Something TEU</th>
        <th class="border-left text-center" colspan="2">Total Full Eg/Some 20'</th>
        <th class="border-left text-center" colspan="2">Total Full Eg/Some 40'</th>
        <th class="border-left text-center" colspan="2">Total Full Eg/Some XYZ</th>
      </tr>
      <tr>
        <th>Report D/T</th>
        <th>Equipment</th>
        <th class="border-left">OTHER THING</th>
        <th class="border-left">Something</th>
        <th class="border-left">OTHER THING</th>
        <th class="border-left">Something</th>
        <th class="border-left">OTHER THING</th>
        <th class="border-left">Something</th>
        <th class="border-left">OTHER THING</th>
        <th class="border-left">Something</th>
        <th class="border-left">OTHER THING</th>
        <th class="border-left">Something</th>
        <th class="border-left">OTHER THING</th>
        <th class="border-left">Something</th>
        <th class="border-left">OTHER THING</th>
        <th class="border-left">Something</th>
        <th class="border-left">OTHER THING</th>
        <th class="border-left">Something</th>
        <th class="border-left">OTHER THING</th>
        <th class="border-left">Something</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="text-left">Fri 01-Feb-19 (00:00)</td>
        <td class="text-left">Feb.2019</td>
        <td class="text-left border-left"></td>
        <td class="text-left">16,131</td>
        <td class="text-left"></td>
        <td class="text-left">13,889</td>
        <td class="text-left border-left"></td>
        <td class="text-left">43,909</td>
        <td class="text-left border-left"></td>
        <td class="text-left">20,474</td>
        <td class="text-left"></td>
        <td class="text-left">14,334</td>
        <td class="text-left border-left"></td>
        <td class="text-left">49,142</td>
        <td class="text-left border-left"></td>
        <td class="text-left">36,605</td>
        <td class="text-left"></td>
        <td class="text-left">28,223</td>
        <td class="text-left border-left"></td>
        <td class="text-left">93,051</td>
      </tr>
      <tr>
        <td class="text-left">Tue 01-Jan-19 (00:00)</td>
        <td class="text-left">Jan.2019</td>
        <td class="text-left border-left"></td>
        <td class="text-left">16,131</td>
        <td class="text-left"></td>
        <td class="text-left">13,889</td>
        <td class="text-left border-left"></td>
        <td class="text-left">43,909</td>
        <td class="text-left border-left"></td>
        <td class="text-left">20,474</td>
        <td class="text-left"></td>
        <td class="text-left">14,334</td>
        <td class="text-left border-left"></td>
        <td class="text-left">49,142</td>
        <td class="text-left border-left"></td>
        <td class="text-left">36,605</td>
        <td class="text-left"></td>
        <td class="text-left">28,223</td>
        <td class="text-left border-left"></td>
        <td class="text-left">93,051</td>
      </tr>
      <tr>
        <td class="text-left">Sat 01-Dec-18 (00:00)</td>
        <td class="text-left">Dec.2018</td>
        <td class="text-left border-left"></td>
        <td class="text-left">16,131</td>
        <td class="text-left"></td>
        <td class="text-left">13,889</td>
        <td class="text-left border-left"></td>
        <td class="text-left">43,909</td>
        <td class="text-left border-left"></td>
        <td class="text-left">20,474</td>
        <td class="text-left"></td>
        <td class="text-left">14,334</td>
        <td class="text-left border-left"></td>
        <td class="text-left">49,142</td>
        <td class="text-left border-left"></td>
        <td class="text-left">36,605</td>
        <td class="text-left"></td>
        <td class="text-left">28,223</td>
        <td class="text-left border-left"></td>
        <td class="text-left">93,051</td>
      </tr>
      <tr>
        <td class="text-left">Thu 01-Nov-18 (00:00)</td>
        <td class="text-left">Nov.2018</td>
        <td class="text-left border-left"></td>
        <td class="text-left">16,131</td>
        <td class="text-left"></td>
        <td class="text-left">13,889</td>
        <td class="text-left border-left"></td>
        <td class="text-left">43,909</td>
        <td class="text-left border-left"></td>
        <td class="text-left">20,474</td>
        <td class="text-left"></td>
        <td class="text-left">14,334</td>
        <td class="text-left border-left"></td>
        <td class="text-left">49,142</td>
        <td class="text-left border-left"></td>
        <td class="text-left">36,605</td>
        <td class="text-left"></td>
        <td class="text-left">28,223</td>
        <td class="text-left border-left"></td>
        <td class="text-left">93,051</td>
      </tr>
      <tr>
        <td class="text-left">Mon 01-Oct-18 (00:00)</td>
        <td class="text-left">Oct.2018</td>
        <td class="text-left border-left"></td>
        <td class="text-left">16,131</td>
        <td class="text-left"></td>
        <td class="text-left">13,889</td>
        <td class="text-left border-left"></td>
        <td class="text-left">43,909</td>
        <td class="text-left border-left"></td>
        <td class="text-left">20,474</td>
        <td class="text-left"></td>
        <td class="text-left">14,334</td>
        <td class="text-left border-left"></td>
        <td class="text-left">49,142</td>
        <td class="text-left border-left"></td>
        <td class="text-left">36,605</td>
        <td class="text-left"></td>
        <td class="text-left">28,223</td>
        <td class="text-left border-left"></td>
        <td class="text-left">93,051</td>
      </tr>
    </tbody>
    <tfoot class="footer-fixed">
      <tr>
        <td colspan="2"><span>Totals:</span></td>
        <td><span></span></td>
        <td><span>145,179</span></td>
        <td><span></span></td>
        <td><span>125,001</span></td>
        <td><span></span></td>
        <td><span>395,181</span></td>
        <td><span></span></td>
        <td><span>184,266</span></td>
        <td><span></span></td>
        <td><span>129,006</span></td>
        <td><span></span></td>
        <td><span>442,278</span></td>
        <td><span></span></td>
        <td><span>329,445</span></td>
        <td><span></span></td>
        <td><span>254,007</span></td>
        <td><span></span></td>
        <td><span>837,459</span></td>
      </tr>
    </tfoot>
  </table>
</html>

(请忽略样式标签中没有出现的类)

当未应用 footer-fixed 类时，页脚列与表格的其余部分匹配。当应用 footer-fixed 时，使它们对齐的最简单方法是什么？

最佳答案

如果我理解得很好，您可以为此使用 CSS Grid。让你的头和脚固定， body 可以根据你想要的高度滚动。

table {
  display: inline-grid;
  grid-template-areas: 
  "head-fixed" 
  "body-scrollable" 
  "foot-fixed";
}

thead {
  grid-area: head-fixed;
}

tbody {
  grid-area: body-scrollable;
  overflow: auto;
  height: calc(100vh - 100px);
}

tfoot {
  grid-area: foot-fixed;
}

th, td {
  min-width: 80px;
}

https://jsfiddle.net/5zy9ujd3/ (播放调整结果区域的大小以检查这是否是您要查找的内容)

希望这有帮助:)

关于html - 将表页脚固定到页面底部，同时保持列的大小正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54858174/

html - 将表页脚固定到页面底部，同时保持列的大小正确

上一篇：css - 添加第 8 个列表项时，仅使用 CSS 更改其他列表元素的属性

下一篇：html - 制作一个屏幕宽度一定的div元素 "think"？