如何实现新增记录时合计行自动下移并固定显示？

一、让合计行随新增数据自动下移 #

核心是将合计行从<tbody>移至专用的<tfoot>标签，配合动态求和逻辑实现自动适配：

1. 重构表格结构
   把原<tbody>末尾的合计行移到<tfoot>中，数据行统一放在<tbody>内。新增数据行时只需向<tbody>添加，<tfoot>会自动保持在表格底部：

<div class="s-table-container">
  <table class="s-table">
    <thead>
      <tr>
        <th>A header</th>
        <th>Another header</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>First</td>
        <td>$ 12</td>
      </tr>
      <tr>
        <td>Second</td>
        <td>$ 12</td>
      </tr>
      <tr>
        <td>third</td>
        <td></td>
      </tr>
      <tr>
        <td>fourth</td>
        <td></td>
      </tr>
      <!-- 新增的第5行直接插入此处 -->
      <tr>
        <td>fifth</td>
        <td>$ 15</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>total</td>
        <td>49</td>
      </tr>
    </tfoot>
  </table>
</div>

2. 实现动态合计

• 网页场景：用JavaScript监听行变化，实时计算合计值

// 计算金额列总和
const amountCells = document.querySelectorAll('.s-table tbody td:nth-child(2)');
let total = 0;
amountCells.forEach(cell => {
  const value = cell.textContent.trim().replace('$ ', '');
  total += value ? Number(value) : 0;
});
// 更新合计单元格
document.querySelector('.s-table tfoot td:nth-child(2)').textContent = `$ ${total}`;

• 电子表格（Excel/Google Sheets）场景：
  1. 选中数据区域（含表头），按Ctrl+T（Excel）或「数据→创建表格」（Google Sheets）转成超级表
  2. 在合计行金额列输入=SUM(Table1[Another header])，新增行时表格自动扩展，合计值会自动包含新数据

二、让合计行滚动时始终可见 #

通过CSS粘性定位实现固定页脚：

1. 设置容器滚动属性
   给外层容器定义固定高度和滚动行为：

.s-table-container {
  height: 300px; /* 自定义容器高度 */
  overflow-y: auto;
}

2. 固定<tfoot>行
   给<tfoot>设置粘性定位，确保滚动时停留在容器底部：

.s-table tfoot {
  position: sticky;
  bottom: 0;
  background-color: #fff; /* 背景色与表格一致，避免内容穿透 */
}

.s-table tfoot td {
  font-weight: bold; /* 可选：突出显示合计行 */
}

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