Live Demo
マウスを重ねるか、Tabキーによるフォーカスで変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div id="tbx-1040" class="tbx-1040"><table><caption>プラン別の内容</caption><thead><tr><th scope="col">Plan</th><th scope="col">Storage</th><th scope="col">Price</th></tr></thead><tbody><tr><th scope="row"><a href="#tbx-1040">Basic</a></th><td>10GB</td><td>Free</td></tr><tr><th scope="row"><a href="#tbx-1040">Pro</a></th><td>100GB</td><td>¥980</td></tr><tr><th scope="row"><a href="#tbx-1040">Team</a></th><td>1TB</td><td>¥2,980</td></tr></tbody></table></div>
CSS
.tbx-1040{width:min(284px,100%);overflow-x:auto;font:12px/1.45 system-ui;color:#293c52}.tbx-1040 table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid #dbe4ed;border-radius:8px;overflow:hidden}
.tbx-1040 caption{text-align:left;font-size:10px;font-weight:700;color:#617287;margin-bottom:8px}
.tbx-1040 th,.tbx-1040 td{padding:10px 8px;text-align:left;border-bottom:1px solid #e5ebf0;white-space:nowrap;transition:background .17s,color .17s}
.tbx-1040 thead th{background:#edf4f8;font-size:10px;letter-spacing:.03em;color:#476179}.tbx-1040 tbody tr:last-child>*{border-bottom:0}
.tbx-1040 tbody th{position:relative;padding-left:11px}.tbx-1040 tbody th:before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:#d27e53;transform:scaleY(0);transition:transform .2s}
.tbx-1040 tbody tr:is(:hover,:focus-within)>*{background:#e9f4f0;color:#16485b}
.tbx-1040 tbody tr:is(:hover,:focus-within)>th:before{transform:scaleY(1)}
.tbx-1040 a{color:inherit;text-decoration:none;font-weight:700}.tbx-1040 a:focus-visible{outline:2px solid #db9b5e;outline-offset:2px;border-radius:2px}
@media(prefers-reduced-motion:reduce){.tbx-1040 th,.tbx-1040 td,.tbx-1040 tbody th:before{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
仕様比較表・料金表・営業日程表
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：ホバーのない端末でも情報が欠落しない設計を基本とします。クリックで操作するサンプルはタップで確認できます。
Browser：最新のChrome・Firefox・Safari・Edge向けCSS。:has()を利用する素材は最新ブラウザを想定しています。
Reduced Motion：prefers-reduced-motion: reduceに対応。