仅用内联CSS能否冻结表格的顶部和底部行？附顶部实现代码

完全可以实现表格底部总计行的冻结，实现逻辑和你用position: sticky冻结顶部表头的思路一致，只需要调整定位属性即可。

实现代码示例 #

<table>
  <thead>
    <tr style='background: grey; position: sticky; top:0;'>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
      <th>Col4</th>
    </tr>
  </thead>
  <tbody>
    <!-- 示例数据行 -->
    <tr><td>数据1</td><td>数据2</td><td>数据3</td><td>数据4</td></tr>
    <tr><td>数据1</td><td>数据2</td><td>数据3</td><td>数据4</td></tr>
    <tr><td>数据1</td><td>数据2</td><td>数据3</td><td>数据4</td></tr>
    <!-- 可添加更多数据行测试滚动效果 -->
  </tbody>
  <tfoot>
    <!-- 底部冻结的总计行 -->
    <tr style='background: #f0f0f0; position: sticky; bottom: 0;'>
      <td colspan="3">总计</td>
      <td>1000</td>
    </tr>
  </tfoot>
</table>

关键注意事项 #

• 给底部冻结行设置不透明背景色：防止滚动时表格内容穿透显示到总计行上，影响可读性
• 确保滚动场景生效：如果表格被包裹在带overflow: auto的容器内，需设置容器高度小于表格总高度，这样滚动时sticky定位才会触发
• 浏览器兼容性：现代主流浏览器（Chrome、Firefox、Edge等）都完美支持position: sticky，老旧浏览器如IE11及以下不支持，若需兼容可考虑JS方案

内容的提问来源于stack exchange，提问作者kevinbuiied