Javascript 在 HTML/CSS 表格下方显示总计
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12568536/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display total below HTML/CSS table
提问by Richard N
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.
我想我需要某种 CSS 代码来保持总字段（div/span）与表格宽度相关联，但我不知道如何做到这一点。
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.
编辑：我还应该说这张表是动态的。它使用 Visualforce（一种原生 force.com 语言）创建。然后将 UI 呈现为 HTML，我确实有 CSS 来格式化生成的 HTML 表。由于我事先不知道我可以拥有多少行，因此我不能简单地为总数添加一行，而是想看看是否有更好的解决方案。
回答by Stephan
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 ththat 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.
“总计”标签位于th2 列（检查肉桂评论）。应用于此单元格的样式会移动右侧的所有文本。总数 (200) 与其他结果一致。
回答by The Alpha
You may try this
你可以试试这个
CSS
CSS
tbody tr{text-align:center; /*If you want to center align of row text*/}
.right{text-align:right;}?
HTML
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.
演示。
回答by Alex Gill
Use a table footer, then you can use the whole width.
使用表格页脚，然后您可以使用整个宽度。
回答by Jrod
Add the colspanattribute to your last tdand align your text to the right.
将colspan属性添加到最后一个td并将文本向右对齐。
HTML
HTML
<tr>
<td class="total-column" colspan="4">
Total:200
</td>
</tr>
CSS
CSS
.total-column {
text-align:right;
}
回答by Alan Shortis
Use colspanfor your 'total' label:
使用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>
