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.

are you familiar with the `colspan` and `rowspan` attributes? — Lorenz Lo Sauer, Sep 24 '12 at 15:53
A total or subtotal of all of the columns in a table is still part of the tabular data, so it still belongs within the table. — cimmanon, Sep 24 '12 at 16:14

Stephan · Accepted Answer · 2019-06-24T08:12:41.647

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.

You have the right idea with the markup, but the tfoot should contain 2 cells: th (Total) and td (200). — cimmanon, Sep 24 '12 at 16:16

score 3 · Answer 2 · answered Sep 24 '12 at 16:17

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.

score 0 · Answer 3 · answered Sep 24 '12 at 15:51

0

Use a table footer, then you can use the whole width.

answered Sep 24 '12 at 15:51

Alex Gill

2,395
1
16
18

Actually using a footer for my Visualforce table might do the trick. – Richard N Sep 25 '12 at 15:27
You know it makes sense Richard. Heres a good example http://learn.shayhowe.com/html-css/organizing-data-tables – Alex Gill Sep 25 '12 at 15:44

Jared · Answer 4 · 2012-09-24T16:05:13.507

0

Add the colspan attribute to your last td and align your text to the right.

HTML

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

CSS

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

edited Sep 24 '12 at 16:05

answered Sep 24 '12 at 15:54

Jared

12,406
1
35
39

score 0 · Answer 5 · answered Sep 24 '12 at 15:58

0

Use colspan for your 'total' label:

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

answered Sep 24 '12 at 15:58

Alan Shortis

1,277
3
18
35

Styles (width, text-align) should always be out of table structure. – Stephan Sep 24 '12 at 16:22
1

@Stephan Of course; this was just a quick answer to the question. – Alan Shortis Sep 25 '12 at 07:03

Display total below HTML/CSS table

5 Answers5

Linked