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

固定列風テーブル(左列強調)

左端の見出し列だけ背景色を敷いて固定列のように見せた表組み。地域別月次実績など横スクロールが想定される一覧に使う。

staticcss

プレビュー

ソースコード

HTML

<table class="d05-11-09-table">
          <thead>
            <tr><th>地域</th><th>1月</th><th>2月</th><th>3月</th></tr>
          </thead>
          <tbody>
            <tr><td>東京</td><td>320</td><td>340</td><td>355</td></tr>
            <tr><td>大阪</td><td>210</td><td>225</td><td>230</td></tr>
            <tr><td>福岡</td><td>140</td><td>138</td><td>150</td></tr>
          </tbody>
        </table>

CSS

.d05-11-09-table{
          border-collapse:collapse;
          font-size:11px;
          width:100%;
        }
        .d05-11-09-table th,
        .d05-11-09-table td{
          padding:7px 10px;
          text-align:right;
          border-bottom:1px solid #eee;
          color:#444;
        }
        .d05-11-09-table th:first-child,
        .d05-11-09-table td:first-child{
          text-align:left;
          background:#eef1f6;
          color:#1f2a44;
          font-weight:600;
        }
        .d05-11-09-table th{
          color:#111;
          border-bottom:1px solid #333;
        }

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