WordPress でのテーブル作成 レスポンシブデザイン(ボックスなど拡大縮小)にする方法

レスポンシブデザイン時のテーブルレイアウトの一つの参考例

WordPress でのテーブル作成は基本的にはビジュアルで作成します。ビジュアルだとボックスを作成して、その中に自分が作成したいものを見た目通りに入れれば良いからです。

 


 

スポンサーリンク

 

レスポンシブデザイン時のテーブルレイアウトの一つの参考例

ビジュアルでテーブルを作成するにはこの様に見た目通りにレアウとすることができますが・・・これがテキストになると、少しなれが必要でレアウトなど見た目通りには行きません。

 

見出しA 見出しB 見出しC 見出しD
コンテンツA コンテンツA コンテンツA
コンテンツA
コンテンツA
コンテンツA
コンテンツB
コンテンツB
コンテンツB コンテンツB
コンテンツB
コンテンツB
コンテンツB
コンテンツB

 

ビジュアルでテーブルを作成する方法は下記を参照してください。

https://tomio23.com/archives/7024

 

 

テキスト表示で書くと、この様になります。

これだとボックスのレアウトを見てボックス内に文字を入れるのは、なれが必要です。ですから、僕はテーブルはビジュアルで記入し、その後テキスト表示します。

<table class=”rdtbl”>
<thead>
<tr>
<th style=”width: 115px;”>見出しA</th>
<th style=”width: 95px;”>見出しB</th>
<th style=”width: 171px;”>見出しC</th>
<th style=”width: 183px;”>見出しD</th>
</tr>
</thead>
<tbody>
<tr>
<td style=”width: 115px;”>コンテンツA</td>
<td style=”width: 95px;”>コンテンツA</td>
<td style=”width: 171px;”>コンテンツA
コンテンツA</td>
<td style=”width: 183px;”>コンテンツA
コンテンツA</td>
</tr>
<tr>
<td style=”width: 115px;”>コンテンツB
コンテンツB</td>
<td style=”width: 95px;”>コンテンツB</td>
<td style=”width: 171px;”>コンテンツB
コンテンツB
コンテンツB</td>
<td style=”width: 183px;”>コンテンツB
コンテンツB</td>
</tr>
</tbody>
</table>

なれないと、どこに何を入れたら良いのかわかりにくいです。

 

作成したテーブルをレスポンシブデザイン(ボックスなど拡大縮小)にする方法

ビジュアルで作成したら「テキスト」表示にして最初の頭と最後を書き換えてください。

 

 

頭の部分、<tr>の上は削除し、下記をコピーペーストします。

 

<div class=”tblwrapper”>
<table class=”rdtbl”>
<thead>


最後にはこれに変更する。

 

</tr>の下を下記に変更します。
</tbody>
</table>
</div>

 

これで携帯で見ても表示枠に収まります。

 

 

テーブル背景色を変える方法は下記を参照してください。

WordPressのTinyMCE Advanced を使って投稿の表に背景色をつける方法

スポンサーリンク

この記事を読んだなら、以下記事もおすすめ!

   

ー 商品 リンク ー

健康に良い食材商品リンク
完全無欠朝食バター コーヒーで使用 健康に良い 食用油オイル 体に良いハチミツ 食品に関する 書籍
HARIO (ハリオ) ハリオール ブライト コーヒー & ティー フレンチ プレス 4杯用 THJ-4SV

バージンココナッツ オイル

マヌカハニーMGO400+ 500g ジョコビッチの生まれ変わる食事
HARIO (ハリオ) ミルク 泡立て器 クリーマーゼット CZ-1  ブラウンシュガーファースト 有機エキストラバージンココナッツオイル  マヌカハニー バイオアクティブ 20+(UMF20+) 500g マヌカドクター【海外直送】 (1個) [並行輸入品] シリコンバレー式 最強の食事
業務用5kg フォンテラ社グラスフェッドバター バージン オリーブオイル エキストラバージン オリーブオイル 酸度0.3%以下 250ml ココナッツ癒しパワー 健康で、美く
ニュージランド産 グラスフェットバター無塩1kg 冷凍 安全ですばらしい 亜麻仁油 フジッコ カスピ海 ヨーグルト 「腸の力」であなたは変わる: 一生病気にならない、脳と体が強くなる食事法 (単行本)
ギー・イージー 100g  MCTオイル グルテンフリー食品 はじめてのオーガニック手帖
コーヒー豆 プレミアムブレンド 100g レインフォレスト  ココナッツオイル100% ココヤシの泉 ナチュレオ 912g 【生活科学研究会】 オーガニック ココナッツ&ギー(グラスフェッドバター)325ml混ぜるだけでバターコーヒー(完全無欠コーヒー)にEU有機認証 

からだの中から若返るグリーンスムージー健康法

携帯出来る MCTオイル (20g×10包)  グルテンフリーパン 

あなたは半年前に食べたものでできている 実践編

 マウントハーゲン オーガニック フェアトレード インスタントコーヒー100g 携帯用日本製粉 アマニ油 ミニパック 5g 30袋  グルテンフリーパスタ