パーツ番号 05-14-02 ・ CSSのみ

イベントタイムテーブル(縦時間軸・複数トラック)

開始時刻を縦軸にとり、会場・トラックごとの発表内容をrowspanで結合したイベント進行表。カンファレンスやセミナーの当日プログラムページに向く。

staticcss

プレビュー

ソースコード

HTML

<table class="d05-14-02-table">
          <thead>
            <tr><th>時間</th><th>Aホール</th><th>Bホール</th></tr>
          </thead>
          <tbody>
            <tr><td>10:00</td><td rowspan="2">基調講演</td><td>受付</td></tr>
            <tr><td>10:30</td><td>ワークショップ</td></tr>
            <tr><td>11:00</td><td rowspan="2">パネル討論</td><td rowspan="2">交流会</td></tr>
            <tr><td>11:30</td></tr>
          </tbody>
        </table>

CSS

.d05-14-02-table{border-collapse:collapse;font-size:10px;width:100%}
        .d05-14-02-table th{background:#0f4c81;color:#fff;padding:6px 8px;text-align:left;font-weight:600}
        .d05-14-02-table td{padding:6px 8px;border:1px solid #dbe4ee;color:#243447;text-align:center;vertical-align:middle}
        .d05-14-02-table td:first-child{background:#eef4fa;font-weight:700;color:#0f4c81;text-align:left}

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