Live Demo
ホバーまたはTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1056"><table><caption>プラン比較</caption><thead><tr><th scope="col">機能</th><th scope="col">Basic</th><th scope="col">Plus</th><th scope="col">Pro</th></tr></thead><tbody><tr><th scope="row">容量</th><td>5 GB</td><td>50 GB</td><td>1 TB</td></tr><tr><th scope="row">ユーザー</th><td>1人</td><td>3人</td><td>無制限</td></tr><tr><th scope="row">サポート</th><td>─</td><td>○</td><td>◎</td></tr></tbody></table></div>
CSS
.tbx-1056{font:11px/1.4 system-ui;color:#2d465c;width:min(320px,100%);overflow-x:auto}.tbx-1056 table{border-spacing:0;border-collapse:collapse;width:100%;table-layout:fixed}.tbx-1056 caption{text-align:left;font-size:11px;font-weight:700;margin:0 0 7px}.tbx-1056 th,.tbx-1056 td{text-align:center;padding:10px 5px;border-bottom:1px solid #dce6ea;transition:background .16s}.tbx-1056 th:first-child{text-align:left;width:32%}.tbx-1056 thead th{background:#e9f0f3;font-size:10px}.tbx-1056 tbody th{font-size:10px}
.tbx-1056:has(tr>*:nth-child(2):hover) tr>*:nth-child(2),.tbx-1056:has(tr>*:nth-child(3):hover) tr>*:nth-child(3),.tbx-1056:has(tr>*:nth-child(4):hover) tr>*:nth-child(4){background:#d3eeea;color:#135e65}.tbx-1056 tbody tr:hover th:first-child{color:#11717b}.tbx-1056 td:hover{outline:2px solid #4c9897;outline-offset:-2px}
@media(prefers-reduced-motion:reduce){.tbx-1056 th,.tbx-1056 td{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Comparison / Pricing
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：ホバーのない端末ではタップ・選択による操作が可能な部分を設けています。
Browser：最新のChrome・Firefox・Safari・Edgeでの利用を想定。:has()を使う素材は対応ブラウザが必要です。
Reduced Motion：prefers-reduced-motion: reduce に対応。