Display total below HTML/CSS table

css, html, javascript, table-footer

Solution

CODE

<!-- 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>

The 'Total' label is located in `th` that spans 2 columns (check cinnamon comment). A style applied to this cell moves all text on the right. The total number (200) is aligned with the other results.

Problem

I have created some tables which display transactions with the last column being the amount fields. I need to display a total/subtotal just below this column. The problem is my table columns are set to % widths. How can I ensure that the field displaying the total amount will be below the amount columns. I think I need some kind of CSS code to keep the total field(div/span) tied to the table width but I am not sure how to do this. Thanks. Example: ``` Col1 Col2 Col3 Amount A B C 100 D E F 100 Total: 200 ``` EDIT: I should also have said that this table is dynamic. Its created using Visualforce (a native force.com language). The UI is then rendered into HTML and I do have CSS to format the resulting HTML table. Since I have no idea in advance of how many rows I can have, I cannot simply add a row for the totals and wanted to see if there was a better solution.

Original source