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

縦罫線のみテーブル

横線を使わずセル間の縦線だけで列を区切る表組み。指標を横に並べて比較したい分析レポートの一覧表示に向く。

staticcss

プレビュー

ソースコード

HTML

<table class="d05-11-11-table">
          <thead>
            <tr><th>項目</th><th>値A</th><th>値B</th></tr>
          </thead>
          <tbody>
            <tr><td>速度</td><td>120ms</td><td>85ms</td></tr>
            <tr><td>精度</td><td>92%</td><td>97%</td></tr>
            <tr><td>コスト</td><td>¥1,200</td><td>¥980</td></tr>
          </tbody>
        </table>

CSS

.d05-11-11-table{
          border-collapse:collapse;
          font-size:11px;
          width:100%;
        }
        .d05-11-11-table th,
        .d05-11-11-table td{
          padding:8px 10px;
          text-align:center;
          border-right:1px solid #e2e2e2;
        }
        .d05-11-11-table th:last-child,
        .d05-11-11-table td:last-child{
          border-right:none;
        }
        .d05-11-11-table th{
          color:#111;
          font-weight:700;
          background:#fafafa;
        }
        .d05-11-11-table td{
          color:#444;
        }
        .d05-11-11-table td:first-child,
        .d05-11-11-table th:first-child{
          text-align:left;
        }

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