grayishスキン適用中

レスポンシブテーブルを利用している際に1列目を固定表示する方法

投稿・固定ページ
この記事は約1分で読めます。

レスポンシブテーブルの1列目を以下のように固定できる機能を追加しました。

thを利用したテーブル

\お得なキャンペーン実施中!/
エックスサーバーキャンペーン

レスポンシブテーブル1列目を固定する方法

設定を行うにはテーマ設定を開いてください。

WordPress管理画面から「Cocoon設定」を選択してください。

Wordpress管理画面からCocoon設定を選択

「本文」タブを開いて「テーブル設定」項目まで移動します。

「横幅の広いテーブルは横スクロール」が有効になっているの確認して「テーブルの1列目を固定表示」も有効にします。

レスポンシブテーブル設定項目

この機能が不要な場合は、当然無効にすることもできます。

動作確認

このようにすることで、1列目がthの場合では以下のように動作します。

thを利用したテーブル

1列目がtdであっても動作するようにしました。

tdを利用したテーブル

参考 【Cocoon】テーブルの見出し固定 - Qiita

上記参考リンクはtdのみですが、今回追加した機能は、thセルにもtdセルにも対応しています。
投稿・固定ページ

\お得なキャンペーン実施中!/
エックスサーバーキャンペーン

\WordPressの情報を発信中!/

わいひら

無料WordPressテーマ、Simplicity、Cocoonを作成。当サイトと寝ログを運営しています。

わいひらをフォローする
わいひらをフォローする

高速かつ高い安定性を誇る高性能レンタルサーバー【エックスサーバー】稼働率99.99%以上の高い安定性で、業界トップクラスの高コストパフォーマンスを誇る高品質レンタルサーバーです。

まずは無料お試し10日間。

サービス運営期間:20年

Cocoon
タイトルとURLをコピーしました