レスポンシブテーブル

小技をBLOGに集結！

ホーム
ブログ一覧
html＋css
レスポンシブテーブル

html＋css

よく聞くことですが、表組（テーブル）がPC画面では綺麗に見れるのにスマホで見ると表組が崩れたりして見づらい事ってよくあります。その理由としては、幅指定のコードが自動挿入されてしまう為です。
また、PC画面は横長表示に対してスマホは縦長表示のためです。
そこで、どうしたらスマホ画面で綺麗にテーブル表示する方法を学んでいきましょう。

▼　目　次

1 横長テーブルレスポンシブ「PC」
2 横長テーブルレスポンシブ(2列のまま)「PC」
3 横並びを縦並びにするテーブルレスポンシブ（2列を1列）「SP」
4 レスポンシブテーブルの注意点

横長テーブルレスポンシブ「PC」

列数を保持

項目1	項目2	項目3	項目4	項目5	項目6
コンテンツ内容1	コンテンツ内容2	コンテンツ内容3	コンテンツ内容4	コンテンツ内容5	コンテンツ内容6

横長テーブルレスポンシブ(2列のまま)「PC」

列数（2列）を保持

見出しセル	データセル
見出しセル	データセル

横並びを縦並びにするテーブルレスポンシブ（2列を1列）「SP」

スマホ画面では2列を1列に表示

見出しセル	データセル
見出しセル	データセル

html

<table class="tbl-r02">
<tbody>
<tr>
<th style="min-width: 160px;">見出しセル</th>
<td>データセル</td>
</tr>
<tr>
<th style="min-width: 160px;">見出しセル</th>
<td>データセル</td>
</tr>
</tbody>
</table>

<tbody>

<tr>

<th style="min-width: 160px;">見出しセル</th>

<td>データセル</td>

</tr>

<tr>

<th style="min-width: 160px;">見出しセル</th>

<td>データセル</td>

</tr>

</tbody>

</table>

CSS

p {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  margin: 60px auto 40px;
}
table {
  margin: 20px auto;
}
.tbl-r02 th {
  background: #ddd;
  border: solid 1px #ccc;
  color: #000;
  padding: 10px;
}
.tbl-r02 td {
　border: solid 1px #ccc;
  padding: 10px;
}

@media screen and (max-width: 640px) {
  .last td:last-child {
    border-bottom: solid 1px #ccc;
    width: 100%;
  }
  .tbl-r02 {
    width: 80%;
  }
  .tbl-r02 th,
  .tbl-r02 td {
　　border-bottom: none;
    display: block;
    width: 100%;
  }
}

p {

font-size: 16px;

font-weight: bold;

text-align: center;

margin: 60px auto 40px;

}

table {

margin: 20px auto;

}

.tbl-r02 th {

background: #ddd;

border: solid 1px #ccc;

color: #000;

padding: 10px;

}

.tbl-r02 td {

　border: solid 1px #ccc;

padding: 10px;

}

@media screen and (max-width: 640px) {

.last td:last-child {

border-bottom: solid 1px #ccc;

width: 100%;

}

.tbl-r02 {

width: 80%;

}

.tbl-r02 th,

.tbl-r02 td {

　　border-bottom: none;

display: block;

width: 100%;

}

レスポンシブテーブルの注意点

テーブル全体の幅をピクセルなどで指定せず。「100％」に設定しておくことでレスポンシブテーブル対応になります。
但し、ワードプレスが自動で挿入してしまう各セルへの幅指定コードが残っていると、思ったようには表示されません。
列（横項目）の数は最初に決めておく
列項目に合った幅をピクセルでなく表全体の割合（％）で指定する。
テーブルの枠線を動かさない！線に触れない！

テーブルの枠線に触れてしまった場合はは、ツールバーの「取り消し」を押すか「Ctrl+Z」キーで一つ前の状態へ戻せます。