如何实现带最小高度的发票表格合计行固定在底部？

问题 #

我正在用HTML和CSS开发发票表格，支持动态添加行，需要实现两个需求：

• 表格主体（tbody）最小能容纳5-6行的高度，行数超出时自动扩展
• 包含“合计”的最后一行固定在表格底部

但目前tbody无法设置最小高度，合计行也没法固定在底部，现有代码如下：

现有HTML代码 #

<table class="table table-bordered border-dark border-2">
  <thead>
    <tr>
      <th scope="col">S No.</th>
      <th scope="col">Name</th>
      <th scope="col">HSN Code</th>
      <th scope="col">Qty</th>
      <th scope="col">Uom</th>
      <th scope="col">Rate</th>
      <th scope="col">Discount</th>
      <th scope="col">Taxable Amount</th>
      <th scope="col">GST %</th>
      <th scope="col">IGST Amount</th>
      <th scope="col">CGST Amount</th>
      <th scope="col">SGST Amount</th>
    </tr>
  </thead>
  <tbody class="item-table">
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
<!--    Dynamically entered rows -->
  </tbody>
  <tfoot>
    <tr class="fw-bold">
        <td></td>
        <td>Total</td>
        <td></td>
        <td>Total Qty</td>
        <td></td>
        <td></td>
        <td>Total Discount</td>
        <td>Total Amount</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
  </tfoot>
</table>

预期效果 #

解决方案 #

原生表格的tfoot默认无法直接固定在底部，tbody的高度也受表格内容限制，需要通过容器包裹+Flex布局来实现需求：

1. 修改HTML结构 #

给表格添加一个容器，用于控制整体高度：

<div class="invoice-table-container">
  <table class="table table-bordered border-dark border-2">
    <thead>
      <tr>
        <th scope="col">序号</th>
        <th scope="col">名称</th>
        <th scope="col">HSN编码</th>
        <th scope="col">数量</th>
        <th scope="col">单位</th>
        <th scope="col">单价</th>
        <th scope="col">折扣</th>
        <th scope="col">应税金额</th>
        <th scope="col">GST%</th>
        <th scope="col">IGST金额</th>
        <th scope="col">CGST金额</th>
        <th scope="col">SGST金额</th>
      </tr>
    </thead>
    <tbody class="item-table">
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <!-- 动态添加的行 -->
    </tbody>
    <tfoot>
      <tr class="fw-bold">
        <td></td>
        <td>合计</td>
        <td></td>
        <td>总数量</td>
        <td></td>
        <td></td>
        <td>总折扣</td>
        <td>总金额</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tfoot>
  </table>
</div>

2. 添加CSS样式 #

通过Flex布局分离表头、主体和合计行，同时控制最小高度：

/* 表格容器：设置最小高度（按6行总高度计算，假设每行40px） */
.invoice-table-container {
  min-height: calc(40px * 6);
  max-height: fit-content;
  border: 2px solid #000;
  border-radius: 0.375rem; /* 匹配Bootstrap表格圆角 */
  overflow: hidden;
}

/* 表格改为Flex布局，让各部分垂直分布 */
.invoice-table-container .table {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-bottom: 0;
}

/* 表头固定高度，不随内容收缩 */
.invoice-table-container thead {
  flex-shrink: 0;
}

/* 主体自动填充剩余空间，设置最小高度容纳5行 */
.invoice-table-container .item-table {
  flex: 1;
  min-height: calc(40px * 5);
  overflow-y: auto; /* 行数超出时显示滚动条 */
}

/* 合计行固定在底部，不随内容收缩 */
.invoice-table-container tfoot {
  flex-shrink: 0;
  border-top: 2px solid #000; /* 加粗分隔线，突出合计行 */
}

/* 确保每行宽度一致，避免列宽混乱 */
.invoice-table-container tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.invoice-table-container th,
.invoice-table-container td {
  width: calc(100% / 12); /* 12列均分宽度 */
}

关键说明 #

• 容器的min-height控制整个表格的最小高度，对应1行表头+5行主体+1行合计的总高度
• tbody设置flex:1自动填充容器剩余空间，min-height确保至少能容纳5行内容
• tfoot设置flex-shrink:0，固定在容器底部，不会被主体内容挤走
• 用table-layout:fixed强制列宽均分，避免动态添加行时出现布局错乱

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