Html 将表尾固定在页面底部，同时保持列的正确大小_Html_Css

Html 将表尾固定在页面底部，同时保持列的正确大小

html css

Html 将表尾固定在页面底部，同时保持列的正确大小,html,css,Html,Css,html示例： <html> <style> .footer-fixed { position: fixed; bottom: 0px; left: 20px; width: calc(100% - 40px); } </style> <table> <thead> <tr> <th colspan="2">

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已修复{
位置：固定；
底部：0px；左侧：20px；
宽度：计算（100%-40px）；
}
完整示例20'
完整示例40'
标准货柜单位总数
满20英尺
满40英尺
总标准箱
总满Eg/约20'
总满Eg/约40'
总满Eg/部分XYZ
电汇报告
设备
其他事情
某物
其他事情
某物
其他事情
某物
其他事情
某物
其他事情
某物
其他事情
某物
其他事情
某物
其他事情
某物
其他事情
某物
19年2月1日星期五（00:00）
2019年2月
16,131
13,889
43,909
20,474
14,334
49,142
36,605
28,223
93,051
19年1月1日星期二（00:00）
2019年1月
16,131
13,889
43,909
20,474
14,334
49,142
36,605
28,223
93,051
2018年12月1日星期六（00:00）
2018年12月
16,131
13,889
43,909
20,474
14,334
49,142
36,605
28,223
93,051
2018年11月1日星期四（00:00）
2018年11月
16,131
13,889
43,909
20,474
14,334
49,142
36,605
28,223
93,051
2018年10月1日星期一（00:00）
2018年10月
16,131
13,889
43,909
20,474
14,334
49,142
36,605
28,223
93,051
总数：
145,179
125,001
395,181
184,266
129,006
442,278
329,445
254,007
837,459

（请忽略样式标记中未显示的类）

如果未应用

footer fixed

类，则页脚列将与表的其余部分匹配。当应用

footer fixed

时，让它们对齐的最简单方法是什么？

可能会检查

位置：sticky

，但这是一个全新的API，所以使用旧浏览器时要小心

如果我理解你的意思，你可以使用CSS网格。让你的头和脚固定，身体可以滚动到你想要的高度

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;
}

（播放调整结果区域大小以检查这是否是您要查找的内容）

希望有此帮助：）

位置：sticky不会保持列大小与不sticky时相同。对于列宽，有很多解决方案。从

表格布局：固定并以
结尾<代码>位置：固定的

将元素从正常的文档流中移除。这个答案肯定让我走上了正确的轨道；谢谢不客气，我很高兴这能帮助你，节省你的时间！