【初心者でもわかる】tableの要素を縦に並べてレスポンシブ対応する方法

どうも7noteです。tableの要素を強制的に縦に並べる方法を解説

table要素を使った場合、PC表示のときはいいのですがスマホだとあまり横に長い表組みだと小さくなりすぎたり、文字が収まらず縦になってしまったりします。

※文字が収まらず縦書きになってしまった例

これを解決するために、スマートフォンの時だけ横並びの要素を縦に並べて対策をおこないます。

ソース

index.html

<table>
  <tr>
    <td>りんご</td>
    <td>ごりら</td>
    <td>らっぱ</td>
    <td>ぱんつ</td>
  </tr>
</table>

style.css

table,td,th {
  border-collapse: collapse;  /* 罫線を引くための指定 */
}
td,th {
  border:1px solid #333;  /* 線を引く */
  padding: 10px 30px;     /* 余白を指定 */
}
@media screen and (max-width: 768px) {
  table,tbody,tr,td,th {
    width: 100%;    /* 幅を100%にする */
    display: block; /* ブロック要素にする */
  }
}

解説

tableは本来<tr>1つで1行ですが、子要素になる<td>``<th>をブロック要素に変えて幅を指定することで、縦に並べることができます。

まとめ

レスポンシブ対応でつかえる技術系はなんぼあってもいいですからね。
tableは使用頻度がそこまで高くはないですが、それでもまだまだ利用される場面が多いのでレスポンシブサイトでも使えるようにテクニックは覚えておくといいかもしれません。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ