在HTML/CSS表格下方顯示總數

我已經創建了一些表格，它們顯示最後一列是金額字段的交易。我需要在此欄下方顯示總計/小計。問題是我的表列被設置爲％寬度。在HTML/CSS表格下方顯示總數

如何確保顯示總金額的字段將低於金額欄。

我想我需要某種CSS代碼來保持表格寬度的總字段（div/span），但我不知道如何做到這一點。

謝謝。

例子：

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

編輯：我還應該說，這表是動態的。它是使用Visualforce（一種原生的force.com語言）創建的。用戶界面然後呈現爲HTML，我確實有CSS來格式化生成的HTML表格。由於我不知道我可以擁有多少行，因此我不能簡單地爲總數添加一行，並想知道是否有更好的解決方案。

來源

2012-09-24 Richard N

您是否熟悉'colspan'和'rowspan'屬性？ –

表中所有列的總計或小計仍屬於表格數據的一部分，因此它仍屬於表中。 – cimmanon

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

來源

2012-09-24 15:53:04 Stephan

你對標記有正確的想法，但tfoot應該包含2個單元格：th（Total）和td（200）。 – cimmanon

使用表格頁腳，然後您可以使用整個寬度。

來源

2012-09-24 15:51:39

實際上，使用我的Visualforce表的頁腳可能會訣竅。 –

你知道這很有道理。下面是一個很好的例子http://learn.shayhowe.com/html-css/organizing-data-tables –

的colspan屬性添加到您的最後td和對齊文本的權利。

HTML

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

CSS

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

來源

2012-09-24 15:54:21 Jrod

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

來源

2012-09-24 15:58:50

樣式（寬度，文本對齊）應始終超出表格結構。 – Stephan

@Stephan當然;這只是對這個問題的快速回答。 –

你可以試試這個

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。

來源

2012-09-24 16:17:56

在HTML/CSS表格下方顯示總數

回答

相關問題