パーツ番号 05-11-05 ・ CSSのみ

数値右揃えテーブル(会計風)

金額列を右揃えにし桁を読み取りやすくした集計表風の表組み。決算報告や見積書など会計系の一覧表示に向く。

staticcss

プレビュー

ソースコード

HTML

<table class="d05-11-05-table">
          <thead>
            <tr><th>科目</th><th>金額</th></tr>
          </thead>
          <tbody>
            <tr><td>売上高</td><td>1,280,000</td></tr>
            <tr><td>仕入高</td><td>540,000</td></tr>
            <tr><td>経費</td><td>210,500</td></tr>
            <tr class="d05-11-05-total"><td>純利益</td><td>529,500</td></tr>
          </tbody>
        </table>

CSS

.d05-11-05-table{
          border-collapse:collapse;
          font-size:11px;
          width:100%;
          font-variant-numeric:tabular-nums;
        }
        .d05-11-05-table th{
          text-align:left;
          padding:6px 8px;
          border-bottom:1px solid #333;
          color:#111;
        }
        .d05-11-05-table th:last-child{
          text-align:right;
        }
        .d05-11-05-table td{
          padding:7px 8px;
          text-align:right;
          color:#444;
          border-bottom:1px solid #eee;
        }
        .d05-11-05-table td:first-child{
          text-align:left;
        }
        .d05-11-05-total td{
          font-weight:700;
          color:#111;
          border-top:2px solid #333;
          border-bottom:none;
        }

クラス名 .d05-11-05 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。