Display total below HTML/CSS table

Question

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.

Answer 1

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.

Answer 2

You may try this

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.