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

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 を使って投稿の表に背景色をつける方法