Growi上でカスタムCSSを使ってMarkdownテーブルのスタイルを変更してみる

目的

Markdownテーブルのスタイルを変更したい。
もっとモダンな感じに出来ないかを試す。
(カスタムCSS機能を使ってみたい）

通常のMarkdownテーブルの見た目

カスタムCSS機能で変えた結果

前よりも見やすい気がする。

サンプルコード

• 表

<div class="gw-table-theme gw-theme-softcard"></div>

| 名前         | 種別     | URL                            | 備考             |
|--------------|----------|--------------------------------|------------------|
| Jira         | Project  | https://jira.example.com       | スプリント運用   |
| Confluence   | Docs     | https://confluence.example.com | 設計/手順書      |
| Status Page  | Public   | https://status.example.com     | メンテ情報       |

<div class="gw-table-theme gw-theme-softcard"></div>をMarkdownテーブルの上に記述するだけでスタイルが適用される。

• カスタムCSS

/* ========== */
:root{ --gw-radius:.6rem; --gw-border:#e5e7eb; }

/* 容器に横スクロール許可（列が多くても崩さない） */
:where(.page-content,#revision-body,.wiki,.content-main,main)
  .gw-table-theme + :is(.editable-with-handsontable,figure.md-table){
  overflow-x:auto; -webkit-overflow-scrolling:touch;
}
:where(.page-content,#revision-body,.wiki,.content-main,main)
  .gw-table-theme + :not(.gw-table-theme):not(table):not(.editable-with-handsontable):not(figure)
  + :is(.editable-with-handsontable,figure.md-table){
  overflow-x:auto; -webkit-overflow-scrolling:touch;
}

/* 表本体（幅/高さ/table-layoutは指定しない） */
:where(.page-content,#revision-body,.wiki,.content-main,main)
  .gw-table-theme + :is(.editable-with-handsontable,figure.md-table) > table,
:where(.page-content,#revision-body,.wiki,.content-main,main)
  .gw-table-theme + :not(.gw-table-theme):not(table):not(.editable-with-handsontable):not(figure)
  + :is(.editable-with-handsontable,figure.md-table) > table{
  border-collapse:separate; border-spacing:0;
  border-radius:var(--gw-radius); overflow:hidden;
}

/* 共通：ヘッダ/セル（高さはpaddingで自然決定） */
:where(.page-content,#revision-body,.wiki,.content-main,main)
  .gw-table-theme + :is(.editable-with-handsontable,figure.md-table) > table thead th,
:where(.page-content,#revision-body,.wiki,.content-main,main)
  .gw-table-theme + :not(.gw-table-theme):not(table):not(.editable-with-handsontable):not(figure)
  + :is(.editable-with-handsontable,figure.md-table) > table thead th{
  position:sticky; top:0; z-index:1;
  font-weight:600; letter-spacing:.02em;
  padding:.65rem .8rem; border-bottom:1px solid var(--gw-border) !important;
}
:where(.page-content,#revision-body,.wiki,.content-main,main)
  .gw-table-theme + :is(.editable-with-handsontable,figure.md-table) > table tbody td,
:where(.page-content,#revision-body,.wiki,.content-main,main)
  .gw-table-theme + :not(.gw-table-theme):not(table):not(.editable-with-handsontable):not(figure)
  + :is(.editable-with-handsontable,figure.md-table) > table tbody td{
  padding:.6rem .8rem; vertical-align:middle; border-bottom:1px solid var(--gw-border) !important;
}

/* 角丸（行数に依存しない） */
:where(.page-content,#revision-body,.wiki,.content-main,main)
  .gw-table-theme + :is(.editable-with-handsontable,figure.md-table) > table tbody tr:last-child td:first-child{ border-bottom-left-radius:var(--gw-radius); }
:where(.page-content,#revision-body,.wiki,.content-main,main)
  .gw-table-theme + :is(.editable-with-handsontable,figure.md-table) > table tbody tr:last-child td:last-child { border-bottom-right-radius:var(--gw-radius); }

/* ─────────── テーマ1：Minimal（フラット／ストライプ無し） ─────────── */
:where(.page-content,#revision-body,.wiki,.content-main,main)
  .gw-theme-minimal + :is(.editable-with-handsontable,figure.md-table) > table{
  background:#fff !important; border:1px solid #e9ecef !important; box-shadow:none !important;
  font-size:.95rem;
}
:where(.page-content,#revision-body,.wiki,.content-main,main)
  .gw-theme-minimal + :is(.editable-with-handsontable,figure.md-table) > table thead th{
  background:#f7f7f8 !important; color:#374151 !important; padding:.45rem .55rem !important;
}
:where(.page-content,#revision-body,.wiki,.content-main,main)
  .gw-theme-minimal + :is(.editable-with-handsontable,figure.md-table) > table tbody tr > *{ background:#fff !important; }
:where(.page-content,#revision-body,.wiki,.content-main,main)
  .gw-theme-minimal + :is(.editable-with-handsontable,figure.md-table) > table tbody tr:hover > *{ background:#f4f4f5 !important; }

/* ─────────── テーマ2：Soft Card（淡ブルーストライプ＋大きめ影） ─────────── */
:where(.page-content,#revision-body,.wiki,.content-main,main)
  .gw-theme-softcard + :is(.editable-with-handsontable,figure.md-table) > table{
  background:#fff !important; border:1px solid #e6eaf5 !important;
  border-radius:.9rem !important; box-shadow:0 12px 28px rgba(0,0,0,.08) !important;
}
:where(.page-content,#revision-body,.wiki,.content-main,main)
  .gw-theme-softcard + :is(.editable-with-handsontable,figure.md-table) > table thead th{
  background:linear-gradient(180deg,#f4f7ff 0%,#eaf1ff 100%) !important;
  color:#334155 !important; padding:.70rem .90rem !important; border-bottom:1px solid #dfe7fb !important;
}
:where(.page-content,#revision-body,.wiki,.content-main,main)
  .gw-theme-softcard + :is(.editable-with-handsontable,figure.md-table) > table tbody tr:nth-child(even) > *{ background:#f7fbff !important; }
:where(.page-content,#revision-body,.wiki,.content-main,main)
  .gw-theme-softcard + :is(.editable-with-handsontable,figure.md-table) > table tbody tr:hover > *{ background:#eef5ff !important; }

/* ─────────── テーマ3：Slate（濃色ヘッダ＋強セパレータ＋濃いzebra） ─────────── */
:where(.page-content,#revision-body,.wiki,.content-main,main)
  .gw-theme-slate + :is(.editable-with-handsontable,figure.md-table) > table{
  background:#fff !important; border:1px solid #cfd7e1 !important;
  box-shadow:0 2px 10px rgba(17,24,39,.08) !important;
}
:where(.page-content,#revision-body,.wiki,.content-main,main)
  .gw-theme-slate + :is(.editable-with-handsontable,figure.md-table) > table thead th{
  background:#111827 !important; color:#e5e7eb !important; text-transform:uppercase !important; letter-spacing:.06em !important;
}
:where(.page-content,#revision-body,.wiki,.content-main,main)
  .gw-theme-slate + :is(.editable-with-handsontable,figure.md-table) > table tbody tr:nth-child(even) > *{ background:#f3f4f6 !important; }
:where(.page-content,#revision-body,.wiki,.content-main,main)
  .gw-theme-slate + :is(.editable-with-handsontable,figure.md-table) > table tbody tr:hover > *{ background:#eaeef9 !important; }
:where(.page-content,#revision-body,.wiki,.content-main,main)
  .gw-theme-slate + :is(.editable-with-handsontable,figure.md-table) > table tbody td:not(:last-child){ border-right:1px dashed #d8dee9 !important; }

今回はテーマ2：Soft Card（淡ブルーストライプ＋大きめ影）を選んでいる。