在 HTML/CSS 表格下方显示总计

Question

我创建了一些显示交易的表格，最后一列是金额字段。我需要在此列下方显示总计/小计。问题是我的表格列设置为 % 宽度。

如何确保显示总金额的字段位于金额列下方。

我想我需要某种 CSS 代码来保持总字段（div/span）与表格宽度相关联，但我不知道该怎么做。

谢谢。

例子：

Col1 Col2 Col3 Amount
A      B    C    100
D      E    F    100
          Total: 200

编辑：我也应该说这个表是动态的。它使用 Visualforce（原生 force.com 语言）创建。然后将 UI 呈现为 HTML，并且我确实有 CSS 来格式化生成的 HTML 表。由于我事先不知道我可以拥有多少行，所以我不能简单地为总数添加一行，并想看看是否有更好的解决方案。

Answer 1

代码

<!-- Style -->
<style>
   #total {
      text-align:right;
   }

   #table {
      border:1px solid red;
      border-collapse:separate;
   }

   #table th, #table td {
      border:1px solid #000;
   }
</style>

<!-- Table -->
<table id="table">
  <thead>
   <tr>
     <th>Col1</th>
     <th>Col2</th>
     <th>Col3</th>
     <th>Amount</th>
   </tr>
  </thead>
  <tbody>
   <tr>
     <td>A</td>
     <td>B</td>
     <td>C</td>
     <td>100</td>
   </tr>
   <tr>
     <td>D</td>
     <td>E</td>
     <td>F</td>
     <td>100</td>
   </tr>
  </tbody>
  <tfoot>
    <tr>
      <th id="total" colspan="3">Total :</th>
      <td>200</td>
    </tr>
   </tfoot>
 </table>

“总计”标签位于跨越 2 列的 th（查看肉桂评论）。应用于此单元格的样式会移动右侧的所有文本。总数 (200) 与其他结果一致。

Answer 2

你可以试试这个

CSS

tbody tr{text-align:center; /*If you want to center align of row text*/}
.right{text-align:right;}​

HTML

<table>
    <thead>
        <tr><th>Col1</th><th>Col2</th><th>Col3</th><th>Amount</th></tr>
    </thead>
    <tbody>
        <tr>
            <td>A</td><td>B</td><td>C</td><td class="right">100</td>
        </tr>
        <tr>    
            <td>D</td><td>E</td><td>F</td><td class="right">100</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td class="right" colspan="3">Total:</td><td class="right">200</td>
        </tr>
    </tfoot>
</table>

DEMO.

Answer 3

使用表格页脚，然后您可以使用整个宽度。

Answer 4

使用colspan 作为您的“总计”标签：

<table border="1>"
    <tr>
        <th width="25%">Col1</th>
        <th width="25%">Col2</th>
        <th width="25%">Col3</th>
        <th width="25%">Amount</th>
    </tr>
    <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>100</td>
    </tr>
    <tr>
        <td colspan="3" style="text-align:right;">total:</td>
        <td>100</td>
    </tr>
</table>

Answer 5

将colspan 属性添加到您最后一个td 并将您的文本向右对齐。

HTML

<tr>
    <td class="total-column" colspan="4">
    Total:200
    </td>
</tr>

CSS

.total-column {
    text-align:right;
}