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

電車時刻表風リスト

発着時刻を時・分で並べた電車時刻表風のリスト表示。送迎バスの時刻案内や施設の運行スケジュールページに活用できる。

staticcss

プレビュー

ソースコード

HTML

<table class="d05-14-10-table">
          <tbody>
            <tr><th>8</th><td>02 15 28 41 54</td></tr>
            <tr><th>9</th><td>07 20 33 46 59</td></tr>
            <tr><th>10</th><td>12 25 38 51</td></tr>
            <tr><th>11</th><td>04 17 30 43 56</td></tr>
          </tbody>
        </table>

CSS

.d05-14-10-table{border-collapse:collapse;width:100%;background:#111827;border-radius:8px;overflow:hidden}
        .d05-14-10-table th{padding:8px 12px;color:#fbbf24;font-size:16px;font-weight:800;text-align:left;border-bottom:1px solid #374151;width:36px}
        .d05-14-10-table td{padding:8px 12px;color:#e5e7eb;font-size:11px;letter-spacing:1.5px;border-bottom:1px solid #374151;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
        .d05-14-10-table tr:last-child th,.d05-14-10-table tr:last-child td{border-bottom:none}

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