Question

我创建了一些表格，显示最后一列为金额字段的交易。我需要在此列下方显示总计/小计。问题是我的表列设置为％widths。

如何确保显示总金额的字段低于列数。

我想我需要某种CSS代码来保持总字段（div / span）与表格宽度相关联，但我不知道如何做到这一点。

感谢。

示例：

Col1 Col2 Col3 Amount
A      B    C    100
D      E    F    100
          Total: 200

编辑：我也应该说这个表是动态的。它使用Visualforce（本机force.com语言）创建。然后将UI呈现为HTML，并且我确实有CSS来格式化生成的HTML表。由于我事先不知道我可以拥有多少行，因此我不能简单地为总计添加一行，并希望了解是否有更好的解决方案。

Answer 1

<强> CODE

<!-- Style -->    
<style>
   #total {
      text-align:right;
   }
</style>    

<!-- Table -->
<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="2">Total :</th>
      <td>200</td>
    </tr>
   </tfoot>
 </table>

“总计”标签位于th，跨越2列（查看肉桂评论）。应用于此单元格的样式会移动右侧的所有文本。总数（200）与其他结果一致。

<强> RESULT

Answer 2

你可以试试这个

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

Answer 3

使用表格页脚，然后您可以使用整个宽度。

Answer 4

将colspan属性添加到您的上一个td并将文字右侧对齐。

<强> HTML

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

<强> CSS

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

Answer 5

将colspan用于您的总数＆＃39;标签：

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

在HTML / CSS表格下方显示总计

5 个答案: