SWELL│テーブルの2列目も固定にする方法

SWELLのテーブルブロックには「横スクロール」と「1列目の固定」機能が標準搭載されています。

しかし、2列目まで固定する機能は用意されていません。

ランキング記事やサービス比較記事では「1列目に順位、2列目に製品名」のように、左2列を固定してスクロールさせたいケースがよくあります。

本記事では、追加CSSクラスとCSSコードだけで2列目も固定する方法を解説します。

サンプル

著者

motoki

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください！

MOTOKI合同会社

カスタマイズの依頼・相談

SWELLテーブルの1列目固定の仕組み

SWELLのテーブルブロックでは、以下の設定を有効にすると1列目が固定されます。

テーブルブロックの右サイドバーから「横スクロール（PC・スマホ両方）」と「1列目を固定（PC・スマホ両方）」をONにすると、figureタグに次のdata属性が付与されます。

<figure data-table-scrollable="both" data-cell1-fixed="both" class="wp-block-table">

内部的には、1列目にposition: stickyとleft: 0が適用され、スクロール時にも1列目が画面左端に固定される仕組みです。

PCだけスクロールする場合はpc、PCもスマホもの場合はbothになります。

2列目も固定したい場面

たとえば、次のようなランキング・比較テーブルを作る場合です。

1列目が「順位」、2列目が「製品名」のテーブルでは、スクロールしても順位と製品名が見えていないと、どの行を見ているのかわからなくなってしまいます。

SWELLの標準機能では1列目しか固定できないため、CSSを追加して2列目も固定に対応させます。

SWELLのテーブルの2列目を固定する手順

以下のコードを追加するだけです。

STEP1：追加CSSクラスを付与する

テーブルブロックを選択し、右サイドバーの「高度な設定」→「追加CSSクラス」に waza-cell2-fixed と入力します。

これにより、figureタグは以下のようになります。

<figure data-table-scrollable="both" data-cell1-fixed="both" class="wp-block-table waza-cell2-fixed">

STEP2：CSSを追加する

「外観」→「カスタマイズ」→「追加CSS」、または子テーマのstyle.cssに以下のCSSを追加します。

figure.waza-cell2-fixed[data-cell1-fixed="both"] > table {
  --swl-cell1-width: 60px;
  --waza-cell2-width: 140px;
  table-layout: fixed;
}
figure.waza-cell2-fixed[data-cell1-fixed="both"] tr > :first-child {
  box-sizing: border-box;
  width: var(--swl-cell1-width);
}
figure.waza-cell2-fixed[data-cell1-fixed="both"] tr > :nth-child(2) {
  box-sizing: border-box;
  width: var(--waza-cell2-width);
  min-width: var(--waza-cell2-width) !important;
  position: sticky !important;
  left: var(--swl-cell1-width) !important;
  z-index: 2;
  background: var(--color_content_bg, #fff);
  overflow-wrap: anywhere;
}
figure.waza-cell2-fixed[data-cell1-fixed="both"] thead tr > :nth-child(2) {
  background: var(--thead-color--bg, var(--color_main));
}

この例は「横スクロール」と「1列目固定」をPC・スマホ両方に設定した表が対象です。結合セル（rowspan・colspan）のない表で使用します。1列目の幅と2列目のleftを同じ変数にそろえ、固定幅のテーブルレイアウトでずれを防ぎます。

おまけ：1列目と2列目の幅を指定する

figure.waza-cell2-fixed.waza-cell2-wide[data-cell1-fixed="both"] > table {
  --swl-cell1-width: 70px;
  --waza-cell2-width: 150px;
}

この追加指定は基本CSSより後に置き、幅を変えたいテーブルだけに waza-cell2-wide も付けます。追加CSSクラス欄は waza-cell2-fixed waza-cell2-wide とします。次の見本は1列目70px・2列目150pxです。横にスクロールしても2列目の左端は70pxの位置にそろいます。

390px幅の見本で横スクロールしたときも、番号列は左端、項目列は左端から70pxの位置に固定されます。固定した2列の右側が狭い場合は、表の中を横にスクロールして説明列を読みます。

狭い画面では1列目だけを固定する

固定する2列の合計幅が大きいと、横スクロールしても右側を少しずつしか読めません。上の幅変更見本では、320px幅で右側の閲覧幅が53pxになります。小さい画面で説明列を読みやすくしたい場合は、対象の表だけにwaza-cell2-narrowも追加し、次のCSSを基本CSSより後に置きます。

@media (max-width: 360px) {
  figure.waza-cell2-fixed.waza-cell2-narrow[data-cell1-fixed="both"] tr > :nth-child(2) {
    position: static !important;
    left: auto !important;
  }
}

追加CSSクラス欄はwaza-cell2-fixed waza-cell2-wide waza-cell2-narrowです。この見本にも付けています。また、4列の見本の「表の横幅」は620pxにしています。幅変更見本の説明文は、2列目を解除した320px幅で右端の列まで読める幅です。表の横幅や各列の幅は、実際の文章量に合わせて調整してください。画面幅360px以下では2列目の固定を解除し、番号列だけを残します。361px以上は2列固定です。境界の360pxは固定列の幅に合わせて調整してください。戻す場合は、この追加CSSとwaza-cell2-narrowだけを取り除きます。

表へTabで移動できないブラウザーでは、次のJavaScriptも1回だけカスタムHTMLブロックに貼ります。対象はwaza-cell2-narrowを付けた表だけです。表をTab移動の対象にし、左右の矢印キーで横スクロールできるようにします。Endキーで横方向の末尾へ移動する仕様ではありません。キーボードで最後の列まで読めることを公開画面で確認してください。

<script>
(() => {
  const init = () => {
    document.querySelectorAll('figure.waza-cell2-narrow[data-table-scrollable="both"]').forEach(figure => {
      if (!figure.hasAttribute('tabindex')) figure.tabIndex = 0;
      if (!figure.hasAttribute('role')) figure.setAttribute('role', 'region');
      if (!figure.hasAttribute('aria-label')) figure.setAttribute('aria-label', '横スクロールで読む表');
    });
  };
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init, { once: true });
  else init();
})();
</script>

表にフォーカスがあるときの枠線は、次のCSSを追加します。表に既存のtabindex・role・aria-labelがあれば上書きしません。表が複数ある場合は、読み手が区別できる名前を各表のaria-labelへ設定してください。戻すときは追加したJSのカスタムHTMLブロックと枠線CSSを外します。JSを外すと自動で付けた属性は次のページ読み込みで消えます。

figure.waza-cell2-narrow:focus-visible { outline: 2px solid var(--color_link, #1769aa); outline-offset: 3px; }

まとめ

SWELLのテーブルで2列目も固定するには、追加CSSクラスwaza-cell2-fixedを付与し、CSSを追加するだけで実現できます。

ポイントをおさらいします。

position: stickyとleft: var(--swl-cell1-width)で2列目を固定し、背景色とz-indexでスクロール時の透過と重なりを防止します。

ボーダーが消える場合はborder-collapse: separateに切り替えることで解決できます。

ランキング記事やサービス比較テーブルで、ぜひ活用してみてください。

60pxと140pxは先頭2列の幅です。狭い画面で固定列だけが画面を占めないよう、残りの列も読める幅にしてください。サンプルのサービス名・金額は架空のデータです。元へ戻す場合は今回追加したCSSとwaza-cell2-fixedクラスを削除します。通常のSWELLの1列目固定設定は別に残ります。