9

最後の列が金額フィールドであるトランザクションを表示するいくつかのテーブルを作成しました。この列のすぐ下に合計/小計を表示する必要があります。問題は、テーブルの列が％幅に設定されていることです。

合計金額を表示するフィールドが金額列の下にあることを確認するにはどうすればよいですか。

合計フィールド（div / span）をテーブル幅に関連付けておくために何らかのCSSコードが必要だと思いますが、これを行う方法がわかりません。

ありがとう。

例：

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

編集：私はまた、このテーブルは動的であると言うべきでした。Visualforce（ネイティブのforce.com言語）を使用して作成されています。次に、UIがHTMLにレンダリングされ、結果のHTMLテーブルをフォーマットするためのCSSがあります。行数が事前にわからないため、単純に合計の行を追加することはできず、より良い解決策があるかどうかを確認したいと思いました。

4

5 に答える 5

15

コード

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

「合計」ラベルは、th2列にまたがるラベルにあります（シナモンコメントを確認してください）。このセルにスタイルを適用すると、すべてのテキストが右側に移動します。総数（200）は、他の結果と一致しています。

于 2012-09-24T15:53:04.713 に答える
3

あなたはこれを試すことができます

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>

デモ。

于 2012-09-24T16:17:56.820 に答える
0

テーブルフッターを使用すると、幅全体を使用できます。

于 2012-09-24T15:51:39.740 に答える
0

colspan最後に属性を追加し、tdテキストを右揃えにします。

HTML

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

CSS

.total-column {
    text-align:right;
}
于 2012-09-24T15:54:21.237 に答える
0

「合計」ラベルに使用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-24T15:58:50.127 に答える