リストや表をスマホでも横に2つ並べて表示したい【WordPress】

例えばこの様な表の空いたスペースを有効活用する為に、表を2分割して横に並べたいと思います。

カラムを使えばPCでのレイアウトは解決ですが、スマホで見ると縦並びになってしまうという試練。

カラムそのものをカスタマイズしてしまうと逆に縦並びにしておきたい部分も横並びになってしまうかと思うので、今回はテーブルを使って対応しました。

完成イメージと概要

テーブルを使って横に2つ並べてみたらバランスも取れてイイ感じになりました。3列もいけそうですね。

table の中に table を入れる

まずは実際に表示するテーブル❶❷を作り、それらを大枠のテーブル内に挿入します。絵を2枚描いて額に入れる様なイメージです。

table❶❷のカスタマイズコード

クラス名[.table-s]は必要に応じて変えてください。

.table-s {
  width: 100%;
  border-collapse: collapse;
  border: solid 2px #fff;
  font-family: 'Noto Sans JP', sans-serif;
  vertical-align: top;
}
.table-s tr {
  border: solid 2px #fff;
  line-height: 1em;
}
.table-s th {
  text-align: center;
  width: 30%;
  padding: 10px 0;
  background: #52c2ee;
  color: #fff;
  border: solid 2px #ffffae;
}
.table-s td {
  width: 70%;
  text-align: center;
  background: #eee;
}

.table-s

私の中で最近流行ってる「要所でフォントを変える」という作戦。特に見出しや表などは通常文章で使っているフォントと違う種類にしています。

それにより少しメリハリが出ます。

.table-s tr

[line-height]で行の高さを指定

.table-s th

1番左の列用。[text-align]で文字を中央に配置。背景色はお好みの色にしてください。

「th ＋ td = 100%」として、それぞれの幅を[width]で指定します。

.table-s tr

thとは背景色を変えています。こちらもサイトに合わせてご変更ください。

tableのhtmlコード

記事内に挿入するhtmlコードです。<tr>〜</tr>を増やせば行を追加できます。

<table class="ta1">
<tr>
<th>No</th><th>ボーナスポイント</th>
</tr>
<tbody>

<tr><th>1</th><td>1,000pt</td></tr>
<tr><th>2</th><td>2,100pt</td></tr>
<tr><th>3</th><td>3,300pt</td></tr>
<tr><th>4</th><td>4,600pt</td></tr>
<tr><th>5</th><td>6,000pt</td></tr>

</tbody></table>

大枠のtable

大枠のテーブル(の中のtd)も少しだけカスタマイズしています。

.table-o {
  vertical-align: top;
  border: none;
  background: #fff;
  width: 50%;
}

例えば「左:5行 / 右:4行」など左右で行数が異なる場合に右テーブルだけ縦位置がズレてしまったので、[vertical-align: top;]を追加して上寄せにしました。

[width:50%]で基本的には左右のバランスが取れるはずです。

大枠tableのhtmlコード

大枠のhtmlの挿入部分に予め作成したテーブルを追加します。

<table><tr>
<td class="table-o">
/*テーブル❶を挿入*/
</td>
<td class="table-o">
/*テーブル❷を挿入*/
<td></tr></html>

今回は中にテーブルを入れていますが、リストや画像などを入れることもできます。ただ、後から中身を編集するのに手間がかかるので、ある程度は完成した状態で挿入した方が良いです。