今年もニコニコ超会議に行って来たjyunzyです。
相変わらず人が多い！（今年の来場者数は15万人だったそうです。去年より3万人多い！）
生で有野課長を見れたし、色んなコスプレイヤーさんも見れたし、自衛隊ブースでの記念撮影も楽しめました。
関係ないですが、私は観光地やイベント会場などの人の多い所に行くと「写真を撮ってくれませんか？」と頼まれる事がよくあります。今回もそうでした。
頼みやすそうに見えるのかな？＾＾；
さて、今回もレスポンシブ関係のネタで話をしたいと思います。
今回は「スマホサイトでtableの横幅をはみ出さない方法」です。
レスポンシブ対応をする時の基本として、横幅を％やemなどで指定する事が挙げられるのですが、tableの場合はそれだけではうまく行かない場合があります。
セル内に英単語が入っていた場合、単語の途中で折り返さないため、それが邪魔をしてスマホで見た時にセルが小さくならない事があるからです。
英単語を途中でも折り返すようにするには「word-break」プロパティと「word-wrap」プロパティを使ってください。
あとは、セル内の文字数が多い場合に、列幅に偏りが出ないように「table-layout」プロパティも使っておくと良いでしょう。
スタイルシートに記述する場合は以下のようにしてください。
table {
width: 100%;
table-layout: fixed;
word-break: break-all;
word-wrap: break-all;
}これで「一応」スマホで見てもtableの横がはみ出さないようになります。
ただ、列が多い時は見づらいです＾＾；
レスポンシブ対応をする時は、tableの列を多くし過ぎないようにしておいた方がいいですね。。。
