CRG-15 — TABLES

テーブル装飾24点在庫あり

ストライプ・料金表・比較表。読める表の型。すべて画像不使用・クラス接頭辞 cg- 付きで、既存サイトに安全に積み込めます。

CRG-15-001

項目	状態
デザイン	完了
実装	進行中
テスト	待機

ストライプテーブルStriped Rows

.cg-tb-stripe {
  width: 260px;
  border-collapse: collapse;
  font-size: 13.5px;
  border-radius: 10px;
  overflow: hidden;
}
.cg-tb-stripe th {
  padding: 10px 16px;
  text-align: left;
  color: #fff;
  background: #37787E;
}
.cg-tb-stripe td { padding: 10px 16px; background: #fff; }
.cg-tb-stripe tbody tr:nth-child(even) td { background: #E9F2F0; }

<table class="cg-tb-stripe"><thead><tr><th>項目</th><th>状態</th></tr></thead><tbody><tr><td>デザイン</td><td>完了</td></tr><tr><td>実装</td><td>進行中</td></tr><tr><td>テスト</td><td>待機</td></tr></tbody></table>

GROSS WT. 587 B ORIGINAL

CRG-15-002

注文 #1024	¥3,200
注文 #1025	¥1,800
注文 #1026	¥5,400

行ホバーテーブルRow Hover

.cg-tb-hover {
  width: 260px;
  border-collapse: collapse;
  font-size: 13.5px;
}
.cg-tb-hover td {
  padding: 12px 16px;
  border-bottom: 1.5px solid #E3DFD4;
  transition: background .15s;
  font-variant-numeric: tabular-nums;
}
.cg-tb-hover td:last-child { text-align: right; font-weight: 700; }
.cg-tb-hover tr:hover td { background: #FFF1E7; cursor: pointer; }

<table class="cg-tb-hover"><tbody><tr><td>注文 #1024</td><td>¥3,200</td></tr><tr><td>注文 #1025</td><td>¥1,800</td></tr><tr><td>注文 #1026</td><td>¥5,400</td></tr></tbody></table>

GROSS WT. 554 B ORIGINAL

CRG-15-003

Free	Pro
¥0	¥980
3件まで	無制限

料金プラン表(推し列)Pricing Emphasis

.cg-tb-price {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13.5px;
  text-align: center;
}
.cg-tb-price th, .cg-tb-price td {
  padding: 12px 26px;
  background: #fff;
  border-bottom: 1.5px solid #E3DFD4;
}
.cg-tb-price th { font-size: 14px; }
.cg-tb-price .hot {
  background: #FFF1E7;
  border-left: 2.5px solid #E8590C;
  border-right: 2.5px solid #E8590C;
  font-weight: 900;
}
.cg-tb-price thead .hot {
  border-top: 2.5px solid #E8590C;
  border-radius: 10px 10px 0 0;
  color: #B84508;
}
.cg-tb-price tbody tr:last-child .hot {
  border-bottom: 2.5px solid #E8590C;
  border-radius: 0 0 10px 10px;
}

<table class="cg-tb-price"><thead><tr><th>Free</th><th class="hot">Pro</th></tr></thead><tbody><tr><td>¥0</td><td class="hot">¥980</td></tr><tr><td>3件まで</td><td class="hot">無制限</td></tr></tbody></table>

GROSS WT. 842 B ORIGINAL

CRG-15-004

営業時間	10:00 - 19:00
定休日	水曜日
電話	06-0000-0000

ミニマル罫線テーブルMinimal Lines

.cg-tb-min {
  width: 270px;
  border-collapse: collapse;
  font-size: 13.5px;
}
.cg-tb-min th, .cg-tb-min td {
  padding: 12px 8px;
  border-bottom: 1px solid #C9C5BA;
  text-align: left;
}
.cg-tb-min th {
  width: 90px;
  font-weight: 700;
  color: #8B857A;
  font-size: 12.5px;
  letter-spacing: .04em;
}

<table class="cg-tb-min"><tbody><tr><th>営業時間</th><td>10:00 - 19:00</td></tr><tr><th>定休日</th><td>水曜日</td></tr><tr><th>電話</th><td>06-0000-0000</td></tr></tbody></table>

GROSS WT. 497 B ORIGINAL

CRG-15-005

SKU	在庫
CRG-001	120
CRG-002	34

ダークヘッダーテーブルDark Header

.cg-tb-dark {
  width: 250px;
  border-collapse: collapse;
  font-size: 13.5px;
  border: 2px solid #1B1A17;
}
.cg-tb-dark th {
  padding: 10px 16px;
  text-align: left;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: .12em;
  color: #E9E7E0;
  background: #1B1A17;
}
.cg-tb-dark td {
  padding: 10px 16px;
  background: #fff;
  border-bottom: 1px solid #E3DFD4;
  font-variant-numeric: tabular-nums;
}

<table class="cg-tb-dark"><thead><tr><th>SKU</th><th>在庫</th></tr></thead><tbody><tr><td>CRG-001</td><td>120</td></tr><tr><td>CRG-002</td><td>34</td></tr></tbody></table>

GROSS WT. 605 B ORIGINAL

CRG-15-006

コース	時間	料金
ライト	30分	¥3,000
スタンダード	60分	¥5,500

角丸カードテーブルRounded Card

.cg-tb-round {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  border: 2px solid #37787E;
  border-radius: 14px;
  overflow: hidden;
}
.cg-tb-round th {
  padding: 10px 18px;
  color: #fff;
  background: #37787E;
  font-size: 12.5px;
}
.cg-tb-round td {
  padding: 11px 18px;
  background: #fff;
  border-top: 1px solid #DCE9E7;
  text-align: center;
}

<table class="cg-tb-round"><thead><tr><th>コース</th><th>時間</th><th>料金</th></tr></thead><tbody><tr><td>ライト</td><td>30分</td><td>¥3,000</td></tr><tr><td>スタンダード</td><td>60分</td><td>¥5,500</td></tr></tbody></table>

GROSS WT. 620 B ORIGINAL

CRG-15-007

	無料	有料
広告なし	−	✓
全機能	−	✓
基本機能	✓	✓

比較チェック表Comparison Checks

.cg-tb-cmp {
  border-collapse: collapse;
  font-size: 13px;
}
.cg-tb-cmp th, .cg-tb-cmp td {
  padding: 10px 18px;
  border-bottom: 1.5px solid #E3DFD4;
  text-align: center;
}
.cg-tb-cmp tbody th { text-align: left; font-weight: 700; }
.cg-tb-cmp .ok { color: #2FA45E; font-weight: 900; font-size: 15px; }
.cg-tb-cmp .no { color: #B5AF9F; }

<table class="cg-tb-cmp"><thead><tr><th></th><th>無料</th><th>有料</th></tr></thead><tbody><tr><th>広告なし</th><td class="no">−</td><td class="ok">✓</td></tr><tr><th>全機能</th><td class="no">−</td><td class="ok">✓</td></tr><tr><th>基本機能</th><td class="ok">✓</td><td class="ok">✓</td></tr></tbody></table>

GROSS WT. 678 B ORIGINAL

CRG-15-008

10:00	開場・受付
11:00	基調講演
13:00	ワークショップ

タイムスケジュール表Schedule

.cg-tb-sched {
  width: 270px;
  border-collapse: collapse;
  font-size: 13.5px;
}
.cg-tb-sched th {
  width: 70px;
  padding: 12px 0;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  font-weight: 700;
  color: #E8590C;
  border-right: 3px solid #E8590C;
  text-align: left;
  vertical-align: top;
}
.cg-tb-sched td {
  padding: 12px 0 12px 18px;
  border-bottom: 1px dashed #C9C5BA;
}
.cg-tb-sched tr:last-child td { border-bottom: none; }

<table class="cg-tb-sched"><tbody><tr><th>10:00</th><td>開場・受付</td></tr><tr><th>11:00</th><td>基調講演</td></tr><tr><th>13:00</th><td>ワークショップ</td></tr></tbody></table>

GROSS WT. 647 B ORIGINAL

CRG-15-009

プラン	容量	速度	サポート	料金
Free	1GB	標準	なし	¥0
Pro	100GB	高速	あり	¥980

横スクロール固定列Sticky First Column

.cg-tb-scrollwrap {
  width: 260px;
  overflow-x: auto;
  border: 2px solid #1B1A17;
  border-radius: 10px;
}
.cg-tb-scroll {
  border-collapse: collapse;
  font-size: 13px;
  white-space: nowrap;
}
.cg-tb-scroll th, .cg-tb-scroll td {
  padding: 10px 16px;
  background: #fff;
  border-bottom: 1px solid #E3DFD4;
}
.cg-tb-scroll thead th { background: #F3EFE5; }
.cg-tb-scroll tbody th,
.cg-tb-scroll thead th:first-child {
  position: sticky;
  left: 0;
  background: #F3EFE5;
  border-right: 2px solid #1B1A17;
  text-align: left;
}

<div class="cg-tb-scrollwrap"><table class="cg-tb-scroll"><thead><tr><th>プラン</th><th>容量</th><th>速度</th><th>サポート</th><th>料金</th></tr></thead><tbody><tr><th>Free</th><td>1GB</td><td>標準</td><td>なし</td><td>¥0</td></tr><tr><th>Pro</th><td>100GB</td><td>高速</td><td>あり</td><td>¥980</td></tr></tbody></table></div>

GROSS WT. 885 B ORIGINAL

CRG-15-010

CSS CARGO Tシャツ

¥2,800

スマホ縦積みテーブルMobile Stack

.cg-tb-stack {
  width: 250px;
  border-collapse: collapse;
  font-size: 13.5px;
}
.cg-tb-stack td {
  display: block;
  padding: 10px 14px;
  background: #fff;
  border: 1.5px solid #E3DFD4;
  border-top: none;
}
.cg-tb-stack tr td:first-child { border-top: 1.5px solid #E3DFD4; border-radius: 10px 10px 0 0; }
.cg-tb-stack tr td:last-child { border-radius: 0 0 10px 10px; margin-bottom: 10px; }
.cg-tb-stack td::before {
  content: attr(data-th);
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #8B857A;
  margin-bottom: 2px;
}

<table class="cg-tb-stack"><tbody><tr><td data-th="商品名">CSS CARGO Tシャツ</td><td data-th="価格">¥2,800</td></tr></tbody></table>

GROSS WT. 688 B ORIGINAL

CRG-15-011

デザイン費	¥80,000
実装費	¥120,000
合計	¥200,000

集計行つきレポート表Report with Total

.cg-tb-total {
  width: 260px;
  border-collapse: collapse;
  font-size: 13.5px;
}
.cg-tb-total td {
  padding: 11px 8px;
  border-bottom: 1px solid #E3DFD4;
  font-variant-numeric: tabular-nums;
}
.cg-tb-total td:last-child { text-align: right; }
.cg-tb-total .sum td {
  border-top: 2.5px solid #1B1A17;
  border-bottom: none;
  font-weight: 900;
  font-size: 15px;
}
.cg-tb-total .sum td:last-child { color: #E8590C; }

<table class="cg-tb-total"><tbody><tr><td>デザイン費</td><td>¥80,000</td></tr><tr><td>実装費</td><td>¥120,000</td></tr><tr class="sum"><td>合計</td><td>¥200,000</td></tr></tbody></table>

GROSS WT. 620 B ORIGINAL

CRG-15-012

企画書	承認
見積書	確認中
契約書	差戻し

ステータスタグ入り表Status Tags

.cg-tb-status {
  width: 250px;
  border-collapse: collapse;
  font-size: 13.5px;
}
.cg-tb-status td {
  padding: 10px 12px;
  border-bottom: 1.5px solid #E3DFD4;
}
.cg-tb-status td:last-child { text-align: right; }
.cg-tb-status i {
  display: inline-block;
  padding: 3px 12px;
  font-size: 11.5px;
  font-style: normal;
  font-weight: 700;
  border-radius: 30px;
}
.cg-tb-status .ok { color: #1E5A38; background: #E5F4EA; }
.cg-tb-status .wait { color: #7A5200; background: #FCF3DC; }
.cg-tb-status .ng { color: #8A2A20; background: #FBEAE7; }

<table class="cg-tb-status"><tbody><tr><td>企画書</td><td><i class="ok">承認</i></td></tr><tr><td>見積書</td><td><i class="wait">確認中</i></td></tr><tr><td>契約書</td><td><i class="ng">差戻し</i></td></tr></tbody></table>

GROSS WT. 785 B ORIGINAL

CRG-15-013

	CRG-001	¥1,200
	CRG-002	¥2,400

:has()選択行ハイライト:has() Row Select

/* JS不要: チェックした行だけ tr:has(:checked) で着色される */
.cg-tb-has {
  width: 250px;
  border-collapse: collapse;
  font-size: 13.5px;
}
.cg-tb-has td {
  padding: 11px 12px;
  border-bottom: 1.5px solid #E3DFD4;
  font-variant-numeric: tabular-nums;
}
.cg-tb-has input {
  width: 17px;
  height: 17px;
  accent-color: #E8590C;
}
.cg-tb-has tr:has(:checked) td {
  background: #FFF1E7;
  font-weight: 700;
}
.cg-tb-has tr:hover td { background: #F7F4EC; }
.cg-tb-has tr:has(:checked):hover td { background: #FFE8D8; }

<table class="cg-tb-has"><tbody><tr><td><input type="checkbox" checked aria-label="選択"></td><td>CRG-001</td><td>¥1,200</td></tr><tr><td><input type="checkbox" aria-label="選択"></td><td>CRG-002</td><td>¥2,400</td></tr></tbody></table>

GROSS WT. 783 B ORIGINAL

CRG-15-014

CRG-001	検品済
CRG-002	検品済
CRG-003	検品中

行をスキャンが走る表Row Scanner

.cg-tb-scan {
  position: relative;
  width: 250px;
  border-collapse: collapse;
  font-size: 13px;
  font-family: 'Courier New', monospace;
  border: 2px solid #1B1A17;
  overflow: hidden;
}
.cg-tb-scan::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -34%;
  height: 34%;
  background: linear-gradient(180deg, transparent, rgba(232, 89, 12, .18), transparent);
  animation: cg-tb-scan-run 2.4s linear infinite;
}
.cg-tb-scan td {
  padding: 10px 16px;
  background: #fff;
  border-bottom: 1px solid #E3DFD4;
}
@keyframes cg-tb-scan-run {
  to { top: 100%; }
}

<table class="cg-tb-scan"><tbody><tr><td>CRG-001</td><td>検品済</td></tr><tr><td>CRG-002</td><td>検品済</td></tr><tr><td>CRG-003</td><td>検品中</td></tr></tbody></table>

GROSS WT. 766 B ORIGINAL

CRG-15-015

受付	09:00
開演	10:00
終了	16:00

行が順に現れる表Fading Rows

.cg-tb-fade {
  width: 240px;
  border-collapse: collapse;
  font-size: 13.5px;
}
.cg-tb-fade tr {
  opacity: 0;
  animation: cg-tb-fade-show 5s ease-in-out infinite;
}
.cg-tb-fade tr:nth-child(2) { animation-delay: .4s; }
.cg-tb-fade tr:nth-child(3) { animation-delay: .8s; }
.cg-tb-fade td {
  padding: 11px 14px;
  background: #fff;
  border-bottom: 1.5px solid #E3DFD4;
  font-variant-numeric: tabular-nums;
}
.cg-tb-fade td:last-child { text-align: right; font-weight: 700; }
@keyframes cg-tb-fade-show {
  0% { opacity: 0; transform: translateY(6px); }
  10%, 85% { opacity: 1; transform: translateY(0); }
  96%, 100% { opacity: 0; }
}

<table class="cg-tb-fade"><tbody><tr><td>受付</td><td>09:00</td></tr><tr><td>開演</td><td>10:00</td></tr><tr><td>終了</td><td>16:00</td></tr></tbody></table>

GROSS WT. 804 B ORIGINAL

CRG-15-016

スタンダードプラン	¥980
プロプラン	¥2,980

ホバーで浮く行Lifting Rows

.cg-tb-lift {
  width: 260px;
  border-collapse: separate;
  border-spacing: 0 8px;
  font-size: 13.5px;
}
.cg-tb-lift td {
  padding: 13px 18px;
  background: #fff;
  border-top: 1.5px solid #E3DFD4;
  border-bottom: 1.5px solid #E3DFD4;
  transition: transform .25s ease, box-shadow .25s ease;
}
.cg-tb-lift td:first-child { border-left: 1.5px solid #E3DFD4; border-radius: 10px 0 0 10px; }
.cg-tb-lift td:last-child { border-right: 1.5px solid #E3DFD4; border-radius: 0 10px 10px 0; text-align: right; font-weight: 900; }
.cg-tb-lift tr { cursor: pointer; }
.cg-tb-lift tr:hover td {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(27, 26, 23, .1);
}

<table class="cg-tb-lift"><tbody><tr><td>スタンダードプラン</td><td>¥980</td></tr><tr><td>プロプラン</td><td>¥2,980</td></tr></tbody></table>

GROSS WT. 823 B ORIGINAL

CRG-15-017

APIサーバー	正常
データベース	正常
バッチ処理	遅延

稼働ランプ付きステータス表Live Status Board

.cg-tb-live {
  width: 250px;
  border-collapse: collapse;
  font-size: 13px;
  font-family: 'Courier New', monospace;
}
.cg-tb-live td {
  padding: 11px 12px;
  background: #14130F;
  color: #E9E7E0;
  border-bottom: 1px solid #33312B;
}
.cg-tb-live td:last-child { text-align: right; }
.cg-tb-live i {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  border-radius: 50%;
  animation: cg-tb-live-blink 1.6s ease-in-out infinite;
}
.cg-tb-live .ok { background: #4AE383; box-shadow: 0 0 6px rgba(74, 227, 131, .8); }
.cg-tb-live .warn { background: #F2B707; box-shadow: 0 0 6px rgba(242, 183, 7, .8); animation-duration: .7s; }
@keyframes cg-tb-live-blink {
  50% { opacity: .35; }
}

<table class="cg-tb-live"><tbody><tr><td><i class="ok"></i>APIサーバー</td><td>正常</td></tr><tr><td><i class="ok"></i>データベース</td><td>正常</td></tr><tr><td><i class="warn"></i>バッチ処理</td><td>遅延</td></tr></tbody></table>

GROSS WT. 964 B ORIGINAL

CRG-15-018

ボタン
カード
グラデ

在庫バーが伸びる表Stock Bars

.cg-tb-stock {
  width: 250px;
  border-collapse: collapse;
  font-size: 13px;
  font-weight: 700;
}
.cg-tb-stock td {
  padding: 10px 10px;
  border-bottom: 1.5px solid #E3DFD4;
}
.cg-tb-stock td:last-child { width: 60%; }
.cg-tb-stock i {
  display: block;
  height: 10px;
  border-radius: 5px;
  width: var(--w, 50%);
  background: linear-gradient(90deg, #2B8A78, #4CC2AB);
  transform-origin: left;
  animation: cg-tb-stock-grow 3.2s cubic-bezier(.3, 1, .4, 1) infinite;
}
@keyframes cg-tb-stock-grow {
  0% { transform: scaleX(0); }
  35%, 85% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}

<table class="cg-tb-stock"><tbody><tr><td>ボタン</td><td><i style="--w:85%"></i></td></tr><tr><td>カード</td><td><i style="--w:60%"></i></td></tr><tr><td>グラデ</td><td><i style="--w:95%"></i></td></tr></tbody></table>

GROSS WT. 836 B ORIGINAL

CRG-15-019

ローディング中の表Skeleton Table

.cg-tb-skel {
  width: 250px;
  border-collapse: collapse;
}
.cg-tb-skel td {
  padding: 12px 14px;
  border-bottom: 1.5px solid #EFECE4;
}
.cg-tb-skel i {
  display: block;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, #E5E1D6 25%, #F5F2EA 50%, #E5E1D6 75%);
  background-size: 200% 100%;
  animation: cg-tb-skel-shine 1.4s ease infinite;
}
.cg-tb-skel .w30 { width: 30%; }
.cg-tb-skel .w40 { width: 40%; }
.cg-tb-skel .w50 { width: 50%; }
.cg-tb-skel .w60 { width: 60%; }
.cg-tb-skel .w70 { width: 70%; }
.cg-tb-skel .w80 { width: 80%; }
@keyframes cg-tb-skel-shine {
  to { background-position: -200% 0; }
}

<table class="cg-tb-skel" aria-label="読み込み中"><tbody><tr><td><i class="w70"></i></td><td><i class="w40"></i></td></tr><tr><td><i class="w50"></i></td><td><i class="w60"></i></td></tr><tr><td><i class="w80"></i></td><td><i class="w30"></i></td></tr></tbody></table>

GROSS WT. 912 B ORIGINAL

CRG-15-020

名前	価格
パーツA	¥500
パーツB	¥800

ソート矢印が跳ねるヘッダーSortable Header

.cg-tb-sort {
  width: 240px;
  border-collapse: collapse;
  font-size: 13.5px;
}
.cg-tb-sort th {
  padding: 11px 16px;
  text-align: left;
  font-size: 12.5px;
  background: #F3EFE5;
  border-bottom: 2.5px solid #1B1A17;
  cursor: pointer;
  user-select: none;
}
.cg-tb-sort th i {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 8px;
  border: solid #8B857A;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .25s, border-color .25s;
}
.cg-tb-sort th:hover { background: #FFF1E7; }
.cg-tb-sort th:hover i {
  border-color: #E8590C;
  animation: cg-tb-sort-bounce .5s ease infinite alternate;
}
.cg-tb-sort td {
  padding: 10px 16px;
  border-bottom: 1px solid #E3DFD4;
}
@keyframes cg-tb-sort-bounce {
  to { transform: rotate(45deg) translate(2px, 0); }
}

<table class="cg-tb-sort"><thead><tr><th>名前<i aria-hidden="true"></i></th><th>価格<i aria-hidden="true"></i></th></tr></thead><tbody><tr><td>パーツA</td><td>¥500</td></tr><tr><td>パーツB</td><td>¥800</td></tr></tbody></table>

GROSS WT. 1071 B ORIGINAL

CRG-15-021

A-01	A-02	A-03
B-01	B-02	B-03
C-01	C-02	C-03

順にスキャン光が伝う格子表Grid Scan Ripple

.cg-tb-ripple {
  border-collapse: collapse;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  border: 2px solid #1B1A17;
}
.cg-tb-ripple td {
  width: 64px;
  padding: 12px 0;
  text-align: center;
  background: #fff;
  border: 1px solid #E3DFD4;
  animation: cg-tb-ripple-glow 2.4s ease-in-out infinite;
}
.cg-tb-ripple tr:nth-child(1) td:nth-child(1) { animation-delay: 0s; }
.cg-tb-ripple tr:nth-child(1) td:nth-child(2) { animation-delay: .15s; }
.cg-tb-ripple tr:nth-child(1) td:nth-child(3) { animation-delay: .3s; }
.cg-tb-ripple tr:nth-child(2) td:nth-child(1) { animation-delay: .15s; }
.cg-tb-ripple tr:nth-child(2) td:nth-child(2) { animation-delay: .3s; }
.cg-tb-ripple tr:nth-child(2) td:nth-child(3) { animation-delay: .45s; }
.cg-tb-ripple tr:nth-child(3) td:nth-child(1) { animation-delay: .3s; }
.cg-tb-ripple tr:nth-child(3) td:nth-child(2) { animation-delay: .45s; }
.cg-tb-ripple tr:nth-child(3) td:nth-child(3) { animation-delay: .6s; }
@keyframes cg-tb-ripple-glow {
  0%, 80%, 100% { background: #fff; color: #1B1A17; }
  10% { background: #E8590C; color: #fff; }
}

<table class="cg-tb-ripple"><tbody><tr><td>A-01</td><td>A-02</td><td>A-03</td></tr><tr><td>B-01</td><td>B-02</td><td>B-03</td></tr><tr><td>C-01</td><td>C-02</td><td>C-03</td></tr></tbody></table>

GROSS WT. 1296 B ORIGINAL

CRG-15-022

SKU	品名	数量
CG-1041	ラックパネル	12
CG-1088	コンテナ金具	240
CG-1130	結束ベルト	36

引き出し行(せり出し+タブ)Pull-out Row

/* 行を引き出しに見立て、hover/フォーカスで「せり出す→左タブが伸びる→影が濃くなる→
   シェブロンがばねで飛び出す」の3段を同時に起こす。キーボードでも同じ演出になる */
.cg-tb-pull {
  width: 300px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  color: #1B1A17;
}
.cg-tb-pull th {
  padding: 4px 10px 8px;
  text-align: left;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  color: #8A8375;
}
.cg-tb-pull tbody tr {
  outline: none;
}
.cg-tb-pull tbody tr:focus-visible {
  outline: 2px solid #3A5A78;
  outline-offset: 1px;
}
.cg-tb-pull tbody td {
  position: relative;
  padding: 11px 10px;
  background: #fff;
  border-top: 1px solid #E3DFD4;
  transition: transform .42s cubic-bezier(.34, 1.56, .64, 1), background .28s ease, box-shadow .42s ease;
}
.cg-tb-pull tbody tr:last-child td { border-bottom: 1px solid #E3DFD4; }
.cg-tb-pull tbody td:last-child { padding-right: 28px; text-align: right; }
/* 左端の引き出しタブ: 下から上へ伸びる */
.cg-tb-pull tbody td:first-child::before {
  content: "";
  position: absolute;
  left: -3px;
  top: -1px;
  bottom: 0;
  width: 3px;
  background: #E8590C;
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform .38s cubic-bezier(.34, 1.56, .64, 1);
}
/* 行末のシェブロン: 遅れてばねで出る */
.cg-tb-pull tbody td:last-child::after {
  content: "";
  position: absolute;
  right: 11px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -5px;
  border-right: 2px solid #E8590C;
  border-bottom: 2px solid #E8590C;
  opacity: 0;
  transform: translateX(-9px) rotate(-45deg) scale(.4);
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1) .05s, opacity .28s ease .05s;
}
.cg-tb-pull tbody tr:hover td,
.cg-tb-pull tbody tr:focus-visible td {
  transform: translateX(8px);
  background: #FFF7F0;
  box-shadow: 0 8px 16px -10px rgba(27, 26, 23, .55);
}
.cg-tb-pull tbody tr:hover td:first-child::before,
.cg-tb-pull tbody tr:focus-visible td:first-child::before {
  transform: scaleY(1);
}
.cg-tb-pull tbody tr:hover td:last-child::after,
.cg-tb-pull tbody tr:focus-visible td:last-child::after {
  opacity: 1;
  transform: translateX(0) rotate(-45deg) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .cg-tb-pull tbody td,
  .cg-tb-pull tbody td:first-child::before,
  .cg-tb-pull tbody td:last-child::after { transition: none; }
  /* 動きを止めても「選択中の行」が判るよう、位置移動だけ捨てて色と印は残す */
  .cg-tb-pull tbody tr:hover td,
  .cg-tb-pull tbody tr:focus-visible td { transform: none; }
  .cg-tb-pull tbody tr:hover td:last-child::after,
  .cg-tb-pull tbody tr:focus-visible td:last-child::after { transform: translateX(0) rotate(-45deg) scale(1); }
}

<table class="cg-tb-pull" role="table" aria-label="出荷リスト"><thead><tr><th scope="col">SKU</th><th scope="col">品名</th><th scope="col">数量</th></tr></thead><tbody><tr tabindex="0"><td>CG-1041</td><td>ラックパネル</td><td>12</td></tr><tr tabindex="0"><td>CG-1088</td><td>コンテナ金具</td><td>240</td></tr><tr tabindex="0"><td>CG-1130</td><td>結束ベルト</td><td>36</td></tr></tbody></table>

GROSS WT. 3301 B ORIGINAL

CRG-15-023

SKU	在庫
CG-2041	128134
CG-2088	042057
CG-2130	316309

数値が実況更新される表Live Tick Table

/* 「値が動く→行が光る→矢印がばねで飛び出す→また戻る」の実況を3層で回す。
   行ごとに遅延をずらして、順に更新が入る監視ボードに見せる */
.cg-tb-tick {
  width: 260px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  color: #1B1A17;
}
.cg-tb-tick th {
  padding: 4px 10px 8px;
  text-align: left;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  color: #8A8375;
}
.cg-tb-tick th:last-child, .cg-tb-tick td:last-child { text-align: right; }
.cg-tb-tick td {
  padding: 9px 10px;
  background: #fff;
  border-top: 1px solid #E3DFD4;
  font-variant-numeric: tabular-nums;
  /* 層1: 更新が入った瞬間に行が光る */
  animation: cg-tb-tick-flash 5.4s ease-out infinite;
}
.cg-tb-tick tbody tr:last-child td { border-bottom: 1px solid #E3DFD4; }
/* 層2: 数字ロール(1行だけ見せる窓) */
.cg-tb-tick-roll {
  display: inline-block;
  height: 16px;
  overflow: hidden;
  vertical-align: -3px;
}
.cg-tb-tick-roll i {
  display: block;
  height: 16px;
  line-height: 16px;
  font-style: normal;
  font-weight: 700;
  animation: cg-tb-tick-roll 5.4s cubic-bezier(.34, 1.56, .64, 1) infinite;
}
/* 層3: 増減の三角。上げは緑、戻りは反転してオレンジ */
.cg-tb-tick-arw {
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 6px;
  vertical-align: 1px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 6px solid #2E7D53;
  opacity: 0;
  animation: cg-tb-tick-arw 5.4s cubic-bezier(.34, 1.56, .64, 1) infinite;
}
.cg-tb-tick tbody tr:nth-child(2) td,
.cg-tb-tick tbody tr:nth-child(2) .cg-tb-tick-roll i,
.cg-tb-tick tbody tr:nth-child(2) .cg-tb-tick-arw { animation-delay: .9s; }
.cg-tb-tick tbody tr:nth-child(3) td,
.cg-tb-tick tbody tr:nth-child(3) .cg-tb-tick-roll i,
.cg-tb-tick tbody tr:nth-child(3) .cg-tb-tick-arw { animation-delay: 1.8s; }
@keyframes cg-tb-tick-flash {
  0%, 26% { background: #fff; }
  32% { background: #FFEDDF; }
  40% { background: #FFF6EE; }
  74% { background: #FFFBF7; }
  100% { background: #fff; }
}
@keyframes cg-tb-tick-roll {
  0%, 27% { transform: translateY(0); }
  36% { transform: translateY(-18px); }
  43% { transform: translateY(-15px); }
  50%, 78% { transform: translateY(-16px); }
  88% { transform: translateY(1px); }
  100% { transform: translateY(0); }
}
@keyframes cg-tb-tick-arw {
  0%, 27% { opacity: 0; transform: translateY(4px) rotate(0deg) scale(.5); border-bottom-color: #2E7D53; }
  36% { opacity: 1; transform: translateY(-3px) rotate(0deg) scale(1.2); border-bottom-color: #2E7D53; }
  46% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); border-bottom-color: #2E7D53; }
  74% { opacity: 0; transform: translateY(0) rotate(0deg) scale(.8); border-bottom-color: #2E7D53; }
  82% { opacity: 1; transform: translateY(0) rotate(180deg) scale(1.15); border-bottom-color: #C2410C; }
  90% { opacity: 1; transform: translateY(0) rotate(180deg) scale(1); border-bottom-color: #C2410C; }
  100% { opacity: 0; transform: translateY(4px) rotate(180deg) scale(.5); border-bottom-color: #C2410C; }
}
@media (prefers-reduced-motion: reduce) {
  /* 動きを止めても「更新後の値と増加の向き」が読める静止形にする */
  .cg-tb-tick td,
  .cg-tb-tick-roll i,
  .cg-tb-tick-arw { animation: none; }
  .cg-tb-tick-roll i { transform: translateY(-16px); }
  .cg-tb-tick-arw { opacity: 1; }
}

<table class="cg-tb-tick" aria-label="在庫の更新状況"><thead><tr><th scope="col">SKU</th><th scope="col">在庫</th></tr></thead><tbody><tr><td>CG-2041</td><td><span class="cg-tb-tick-arw"></span><span class="cg-tb-tick-roll"><i>128</i><i>134</i></span></td></tr><tr><td>CG-2088</td><td><span class="cg-tb-tick-arw"></span><span class="cg-tb-tick-roll"><i>042</i><i>057</i></span></td></tr><tr><td>CG-2130</td><td><span class="cg-tb-tick-arw"></span><span class="cg-tb-tick-roll"><i>316</i><i>309</i></span></td></tr></tbody></table>

GROSS WT. 4049 B ORIGINAL

CRG-15-024

項目	LITE	STANDARD	PRO
月額	980	2,480	4,980
容量	5GB	50GB	500GB
サポート	メール	優先対応	専任担当

列スポットライト比較表Column Spotlight Table

/* :has() で「触れている列」を丸ごと拾う。物語は3段:
   ①他の列が沈む ②選んだ列がばねで持ち上がって影が立つ ③見出しの下線が左から伸びる。
   th を tabindex で拾えるようにしてあるので、キーボードでも同じ演出になる */
.cg-tb-spot {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  color: #1B1A17;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}
.cg-tb-spot th,
.cg-tb-spot td {
  padding: 11px 14px;
  background: #fff;
  border-bottom: 1px solid #E3DFD4;
  text-align: right;
  transition: transform .42s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease, background .3s ease, box-shadow .42s ease;
}
.cg-tb-spot th:first-child,
.cg-tb-spot td:first-child { text-align: left; color: #8A8375; }
.cg-tb-spot thead th {
  position: relative;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #8A8375;
  border-bottom: 2px solid #1B1A17;
  outline: none;
}
.cg-tb-spot thead th:focus-visible { outline: 2px solid #3A5A78; outline-offset: -2px; }
/* 見出しの下線: 左から伸びる第3の層 */
.cg-tb-spot thead th::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 3px;
  background: #E8590C;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1) .04s;
}
.cg-tb-spot tbody tr:last-child td { border-bottom: 2px solid #1B1A17; }
/* ①どこかに触れたら、データ列を一段沈める */
.cg-tb-spot:has(tbody td:hover) tbody td:not(:first-child),
.cg-tb-spot:has(thead th:focus-visible) tbody td:not(:first-child) { opacity: .42; }
/* ②選ばれた列だけ戻して持ち上げる */
.cg-tb-spot:has(tr > :nth-child(2):hover) tr > :nth-child(2),
.cg-tb-spot:has(tr > :nth-child(2):focus-visible) tr > :nth-child(2),
.cg-tb-spot:has(tr > :nth-child(3):hover) tr > :nth-child(3),
.cg-tb-spot:has(tr > :nth-child(3):focus-visible) tr > :nth-child(3),
.cg-tb-spot:has(tr > :nth-child(4):hover) tr > :nth-child(4),
.cg-tb-spot:has(tr > :nth-child(4):focus-visible) tr > :nth-child(4) {
  opacity: 1;
  background: #FFF7F0;
  transform: translateY(-4px);
  box-shadow: 0 10px 18px -14px rgba(27, 26, 23, .75);
}
/* ③その列の見出しだけ下線を伸ばす */
.cg-tb-spot:has(tr > :nth-child(2):hover) thead th:nth-child(2)::after,
.cg-tb-spot:has(tr > :nth-child(2):focus-visible) thead th:nth-child(2)::after,
.cg-tb-spot:has(tr > :nth-child(3):hover) thead th:nth-child(3)::after,
.cg-tb-spot:has(tr > :nth-child(3):focus-visible) thead th:nth-child(3)::after,
.cg-tb-spot:has(tr > :nth-child(4):hover) thead th:nth-child(4)::after,
.cg-tb-spot:has(tr > :nth-child(4):focus-visible) thead th:nth-child(4)::after {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  .cg-tb-spot th,
  .cg-tb-spot td,
  .cg-tb-spot thead th::after { transition: none; }
  /* 静止形: 浮き上がりは捨てるが「どの列を見ているか」は色と下線で残す */
  .cg-tb-spot:has(tr > :nth-child(2):hover) tr > :nth-child(2),
  .cg-tb-spot:has(tr > :nth-child(2):focus-visible) tr > :nth-child(2),
  .cg-tb-spot:has(tr > :nth-child(3):hover) tr > :nth-child(3),
  .cg-tb-spot:has(tr > :nth-child(3):focus-visible) tr > :nth-child(3),
  .cg-tb-spot:has(tr > :nth-child(4):hover) tr > :nth-child(4),
  .cg-tb-spot:has(tr > :nth-child(4):focus-visible) tr > :nth-child(4) { transform: none; }
}

<table class="cg-tb-spot" role="table" aria-label="プラン比較表"><thead><tr><th scope="col">項目</th><th scope="col" tabindex="0">LITE</th><th scope="col" tabindex="0">STANDARD</th><th scope="col" tabindex="0">PRO</th></tr></thead><tbody><tr><td>月額</td><td>980</td><td>2,480</td><td>4,980</td></tr><tr><td>容量</td><td>5GB</td><td>50GB</td><td>500GB</td></tr><tr><td>サポート</td><td>メール</td><td>優先対応</td><td>専任担当</td></tr></tbody></table>

GROSS WT. 3991 B ORIGINAL

テーブル装飾24点 在庫あり