本文へスキップ

CRG-15 — TABLES

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

ストライプ・料金表・比較表。読める表の型。 すべて画像不使用・クラス接頭辞 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
FreePro
¥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-001120
CRG-00234

ダークヘッダーテーブル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
プラン容量速度サポート料金
Free1GB標準なし¥0
Pro100GB高速あり¥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-01A-02A-03
B-01B-02B-03
C-01C-02C-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