问题
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.
回答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.
回答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.
回答3:
Use a table footer, then you can use the whole width.
回答4:
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>
回答5:
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;
}
来源:https://stackoverflow.com/questions/12568536/display-total-below-html-css-table