よりレスポンシブなWordPressテーブルと繰り返しヘッダー

WordPressのテーブルは、WordPressの進歩にもかかわらず、両刃の剣です。データの表示には最適ですが、ストーリーを伝えるのには適していません。それが十分に悪いと思ったら、スマートフォンやタブレットのことを考えてみてください。これらのデバイスでは、データを表示するスペースがさらに少なくなります。テーブルにはいくつかの欠点があり、それらと共存する必要がありますが、レスポンシブさはその1つではありません。.

最後のメジャーアップデートでWP Table Managerは、追加のレスポンシブオプションを備えたテーブルの新しいレスポンシブデザインを導入しました。

ヘッダーが繰り返されるレスポンシブテーブル

テーブルを表示するのに十分なスペースがない場合はどうなりますか？ 前回のアップデートでは、WP Table Manager は、スクロールバーの追加と列の非表示の 2 つのレスポンシブオプションを提供しました。 これら 2 つのモードにはそれぞれの用途がありますが、水平方向のスクロールやデータの非表示を避けたい場合は、新しい 3 番目のモードが適している可能性があります。それは、繰り返しヘッダーです。

繰り返しヘッダーのレスポンシブモードは、他のモードと同様、十分なスペースがある場合は通常のテーブルにデフォルト設定されます。デスクトップデバイス、コンピューター、またはラップトップなどです。スペースが不足している場合は、2列のシンプルなテーブルに縮小されます。テーブルヘッダーと行の値です。.

実際には、テーブルに4つの列がある場合、元のテーブルの各行は、レスポンシブバージョンでは4つの新しい行として表されます。各新しい行には、元のヘッダーとそのデータ値のみが含まれます。このスキームは、元のテーブルの各行に適用されるため、データ値の隣に常に繰り返されるヘッダーが存在します。.

このシンプルなレスポンシブ動作により、繰り返しヘッダーテーブルのモードでは、モバイルやタブレットでどのように表示されるかを気にすることなく、テーブルにデータを好きなだけ追加できます。さらに、 WP Table Manager は、小さいデバイスの行に交互の色を使用します。元のテーブルの各行は異なる色になり、コンテキストを保持し、WordPressの読者がレコードを区別できるようにします。.

繰り返しヘッダーモードでのレスポンシブテーブルのカスタマイズ

テーブルを編集するときに、繰り返しヘッダーモードを選択できます。レスポンシブオプション を フォーマット メニューから選択し、最初のドロップダウンから 繰り返しヘッダー モードを探します。 また、レスポンシブブレークポイントとレスポンシブ最大高さの 2 つの方法で、繰り返しヘッダーテーブルをカスタマイズできます。

レスポンシブブレークポイントとは、WordPressテーブルマネージャープラグインが通常のテーブルレンダリングを停止し、代わりにレスポンシブな繰り返しヘッダーモードに切り替える幅のことです。この値は、使用しているWordPressテーマと列の数に基づいて推定できます。特定の幅以下でテーブルが収まらないと思われる場合は、その幅をブレークポイントとして使用します。.

行や列が多い場合、ヘッダーを繰り返すモードによって非常に長いページが作成される可能性があります。レスポンシブ最大高さは、レスポンシブモードでのヘッダーを繰り返すテーブルの高さを制限することでこの問題に対処します。レスポンシブテーブルが長すぎる場合、WordPressの読者はスクロールバーを使用して通常どおりさらにデータを表示できます。.

レスポンシブテーブルには魔法の解決策はありませんが、WordPressテーブルの繰り返しヘッダーモードは近づいています。小さなテーブルでも、多くの行や列がある大きなテーブルでも、 WP Table Managerの新しい繰り返しヘッダーモードは、デバイスに関係なくデータを適切に表示します。.