SWELLのテーブルブロックには「横スクロール」と「1列目の固定」機能が標準搭載されています。
しかし、2列目まで固定する機能は用意されていません。
ランキング記事やサービス比較記事では「1列目に順位、2列目に製品名」のように、左2列を固定してスクロールさせたいケースがよくあります。
本記事では、追加CSSクラスとCSSコードだけで2列目も固定する方法を解説します。
サンプル
スクロールできます
| 順位 | サービス名 | 月額料金 | 無料期間 | 容量 | 特徴 |
|---|---|---|---|---|---|
| 1位 | サービスA | 990円 | 30日間 | 300GB | 高速表示・サポート充実 |
| 2位 | サービスB | 1,100円 | 14日間 | 400GB | WordPress簡単インストール対応 |
| 3位 | サービスC | 880円 | 10日間 | 200GB | コスパ重視・初心者向け |
| 4位 | サービスD | 1,320円 | 30日間 | 500GB | 法人利用・大規模サイト向け |
| 5位 | サービスE | 550円 | なし | 100GB | 最安・個人ブログ向け |
目次
SWELLテーブルの1列目固定の仕組み
SWELLのテーブルブロックでは、以下の設定を有効にすると1列目が固定されます。
テーブルブロックの右サイドバーから「横スクロール（SPのみ）」と「1列目を固定（SPのみ）」をONにすると、figureタグに次のdata属性が付与されます。
<figure data-table-scrollable="sp" data-cell1-fixed="sp" class="wp-block-table">内部的には、1列目にposition: stickyとleft: 0が適用され、スクロール時にも1列目が画面左端に固定される仕組みです。
PCだけスクロールする場合はpc、PCもスマホもの場合はbothになります。
2列目も固定したい場面
たとえば、次のようなランキング・比較テーブルを作る場合です。
1列目が「順位」、2列目が「製品名」のテーブルでは、スクロールしても順位と製品名が見えていないと、どの行を見ているのかわからなくなってしまいます。
SWELLの標準機能では1列目しか固定できないため、CSSを追加して2列目も固定に対応させます。
SWELLのテーブルの2列目を固定する手順
以下のコードを追加するだけです。
