ウェブサイトのテーブルがモバイル端末で表示不全になる問題を解決するプラグインとコードの推薦

外国貿易向け独立サイトを作成する際、通常、製品詳細ページに製品の詳細な仕様を挿入します。一部の企業は画像を挿入し、一部の企業はテーブルを挿入します。WordPressでサイトをインストールする場合、ほとんどのテーマは画像が画面サイズに応じて自動的に縮小されることをサポートしていますが、テーブルはExcelから直接コピーされるため、レスポンシブレイアウトを実現できず、モバイルでテーブルの内容が完全に表示されません。Naibaはここで、この問題を解決する方法を紹介します。

5つのWordPressプラグイン推奨

WordPressのテーブルプラグインを使用すると、レスポンシブレイアウトのテーブルを挿入でき、ブラウザウィンドウに応じてテーブル幅が自動的に変更されます。

以下の5つのテーブルプラグインを試してみて、最も使いやすいものを選んでください。

Ninja Tables

Ninja TablesはWordPressで最もユーザー数の多いテーブルプラグインです。製品テーブルを作成するにはやや大げさかもしれません。

Ninja Tablesを使用すれば、どんなことでもコードを書かずに実現できます！最も優れている点は、テーブルに何千ものデータがあっても、Ninja Tablesはサイトを遅くしないことです。管理パネルから迅速かつ効率的にテーブルを作成・管理できます。

Ninja Tablesは非常に強力で、無料版とPro版があります。ダウンロードページでデモを確認できます。

ダウンロードリンク

TablePress

TablePressは無料のテーブルプラグインで、以前、NaibaはTablePressは市場で最も人気のある無料のWordPressテーブルプラグインです。シンプルで美しいテーブルを簡単に作成できます。バックエンドにはスプレッドシートのようなインターフェースがあり、コードを書かずにデータを追加できます。

ショートコードを使用して、テーブルをページ、投稿、ウィジェットエリアに追加できます。TablePressはフィルター、ページネーション、ソートをサポートしています。Excel、CSV、HTML、JSONファイルからテーブルをインポート/エクスポートできます。実際の使用例については、上にスクロールしてこの記事内のテーブルをご覧ください！

ダウンロードリンク

CSS3 Responsive Tables

CSS3 Responsive TableはレスポンシブなWordPressテーブルプラグインです。価格比較表を作成したい場合に最適です。

20以上のカラーオプション、2つのテーブルスタイル、アクティブ列、ホバーカラースタイルなどを備えています。このプラグインはアイコン、ツールチップ、リボンをサポートしています。また、他のファイル形式へのデータのインポート/エクスポートも簡単に行えます。

ダウンロードリンク

Responsive Data Table

Responsive Data Tableは、デスクトップとモバイルの両方でレスポンシブな構造の水平データテーブルを管理するためのプラグインです。

ショートコードを使用して、データテーブルをページ、投稿、ウィジェットに簡単に埋め込むことができます。列ヘッダーを複数のサブヘッダーに分割できます。1つのページで異なるカラーコンビネーションの複数のテーブルを使用できます。

テーブルデータはWordPress管理画面内で簡単にテーブル形式で編集できます。

ダウンロードリンク

WP Table Builder

WP Table Builderは、WordPress用のドラッグ＆ドロップテーブルビルダープラグインです。WP Table Builderを使用すると、レスポンシブテーブルを非常に簡単に作成できます。

WP Table Builderは、比較表、価格表、リスト表などの作成に最適です。

ダウンロードリンク

コードを使用して修正

上記のテーブルプラグインを試してみると、Excelの表を直接コピー＆ペーストする方が速くて便利で、セルの結合なども簡単であることに気づくかもしれません。

そのため、テーブルにCSSスタイルを手動で追加して、モバイル端末でアクセスしたときにテーブルを左右にスクロールできるようにすることができます。

具体的な方法は、テーブルを挿入した後にHTMLモードに切り替え、overflow:scroll; プロパティを追加することです。