ZeroPlus Media > Web制作 > HTML/CSS > 表をスマホ表示に対応する方法を解説-WordPress対応

表をスマホ表示に対応する方法を解説-WordPress対応

HTML/CSS

2021/12/23

2023/04/14

tableタグを用いることにより、「表」としてデータを見やすく出力することができます。

tableタグにはPCだとわかりやすいけれども、スマホで表示した際に下記問題点が生じてしまいます。

表示が崩れてしまう
テキストが改行されてしまう

今回はそれらの問題を解決できるソースコードを紹介していきます。

今回の記事で身につく内容

表をスマホで綺麗に表示する方法

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

サンプル1.表を縦並べで表示する

PCの表示とSPの表示はそれぞれ下記のようになります。

表示結果

セル数,セル内文字数が共に少ない場合はPC,SP共に見やすい表を出力することができます。

それではサンプルコードを確認しましょう。

サンプルコード

<table class="table_01">
  <tr>
    <th>見出し01</th>
    <td>内容_1-1</td>
    <td>内容_1-2</td>
    <td>内容_1-3</td>
  </tr>
  <tr>
    <th>見出し02</th>
    <td>内容_2-1</td>
    <td>内容_2-2</td>
    <td>内容_2-3</td>
  </tr>
  <tr class="last">
    <th>見出し03</th>
    <td>内容_3-1</td>
    <td>内容_3-2</td>
    <td>内容_3-3</td>
  </tr>
</table>

.table_01 {
  margin: 20px auto;
  border-collapse: collapse;
  border-spacing: 0;
}
.table_01 th {
  background: #FFBB1E;
  border: solid 1px #ccc;
  color: #fff;
  padding: 10px;
}
.table_01 td {
  border: solid 1px #ccc;
  padding: 10px;
}

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

サンプル2.表をスクロールして表示させる

PCの表示とSPの表示はそれぞれ下記のようになります。

表示結果

長いテキストが入る際にも表示を崩すことなく、PC,SP共に見やすい表を出力することができます。

それではサンプルコードを確認しましょう。

サンプルコード

<table class="table_01">
  <tr>
    <th>見出し01</th>
    <td>内容_1-1</td>
    <td>内容_1-2</td>
    <td>内容_1-3</td>
  </tr>
  <tr>
    <th>見出し02</th>
    <td>内容_2-1</td>
    <td>内容_2-2</td>
    <td>内容_2-3</td>
  </tr>
  <tr>
    <th>見出し03</th>
    <td>内容_3-1</td>
    <td>内容_3-2</td>
    <td>内容_3-3</td>
  </tr>
</table>

.scroll{
  overflow-x: scroll;
  scrollbar-width: none; /*Firefox対応のスクロールバー非表示のコード*/ 
}
.scroll::-webkit-scrollbar {  
  display:none; /*Google Chrome,Safari,Edge対応のスクロールバー非表示のコード */
}
.table_02 {
  margin: 20px auto;
  border-collapse: collapse;
  border-spacing: 0;
}
.table_02 tr {
  white-space: nowrap;
}
.table_02 th {
  background: #FFBB1E;
  border: solid 1px #ccc;
  color: #fff;
  padding: 10px;
}
.table_02 td {
  border: solid 1px #ccc;
  padding: 10px;
}

こちらのサンプルコードはZeroPlus Mediaでも実際に使用しています。