如何在Panel内排版多行内容的5列表格并对齐金额

修正后的代码： #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<style>
  .amount-col {
    text-align: right; /* 确保Amount列数字右对齐 */
  }
</style>

<div class="container">
    <div class="panel panel-primary">
        <div class="panel-heading">Transaction Details</div>
        <div class="panel-body">
            <table class="table"> <!-- 使用Bootstrap表格类优化样式 -->
                <thead>
                    <tr>
                        <th scope="col">SKU</th>
                        <th scope="col">Description</th>
                        <th scope="col">Unit Price</th>
                        <th scope="col">Quantity</th>
                        <th scope="col" class="amount-col">Amount</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 商品数据行 -->
                    <tr>
                        <td><span id="lblSKU">CCB</span></td>
                        <td><span id="lblDesc">chocolate Certificate</span></td>
                        <td><span id="lblUnitPrice">$32.00</span></td>
                        <td><span id="lblQuantity">1</span></td>
                        <td class="amount-col"><span id="lblAmount">$32.00</span></td>
                    </tr>
                    <!-- 服务费行 -->
                    <tr>
                        <td></td>
                        <td><span id="lblServFee">Service Fee</span></td>
                        <td></td>
                        <td></td>
                        <td class="amount-col"><span id="lblServiceFee">$0.69</span></td>
                    </tr>
                    <!-- 总计行 -->
                    <tr>
                        <td colspan="4" style="text-align: right; font-weight: bold;">Total Amount Paid</td>
                        <td class="amount-col" style="font-weight: bold;"><span id="lblTotAmount">$32.69</span></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

关键修改说明： #

• 语义化表格结构：把原单行内容拆分为三个独立<tr>，分别对应商品数据、服务费、总计，确保每行内容与表头正确对应，解决跨行内容错位问题。
• 数字对齐处理：给Amount列添加.amount-col类，设置右对齐样式，不管后端返回的是2位还是3位金额数字，都能保持视觉上的整齐对齐。
• 总计行单元格合并：总计行首单元格用colspan="4"合并前四列，同时设置右对齐和加粗，突出总计信息，总金额同步保持右对齐。
• Bootstrap样式优化：给表格添加table类，利用框架默认样式提升整体美观度。

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