テーブルのセル内でURLなど改行せずにはみ出してしまう問題を解決する的なお話

レスポンシブでサイトを作っているときに、中々にネックになってくるのがtable。
というのもスマホだと画面サイズによっては2カラムでも厳しかったりしたり。

で、まぁ2カラムくらいだったら耐えられるだろうと作ってみても、URLなどが入力されてるとはみ出てしまう事が多々あり。
white-space:normalとしてもURLだと折り返さなかったりするっていう状況であったり。

けどこれをどうにか解決するには的なお話でも。

■word-wrap:break-wordで対応

table{
  table-layout:fixed;
}

table td{
  word-wrap:break-word;
}

これで見事改行される。
簡単といえば簡単なので、ブレークポイントでわけてもいいし、全体に適用させてもいいんじゃないかと。

■displayを変更してそもそも2カラムじゃなくて1カラムに

@media screen and (max-width:640px){
  table th,
  table td{
    display:block;
  }
}

ってな感じで640px以下の場合は1カラムになるように設定してあげる的な。

自分的には2カラムでがんばるよりも1カラムにした方が見やすいんじゃないかと思うので、
displayを変更して1カラムにする方がいいんじゃないかと思った的な。