現在、ウェブサイトのレスポンシブ化を進めているところですが、tableタグを使い、表を作成しているページでの対応に憂慮する事態が生じております。
比較サイト等においては縦８列、横２０行ぐらいの表を使用していまして、各tdタグの間にpaddingなどを設定しているものですから、スマホで表示した際に横長になってくずれてしまうわけです。
スマホの横幅を横320pxと仮定しますと、８列の場合、ひとつの列のwidth幅が約40px分しか確保できなくなってしまい、文字が縦１行になって表示されてしまうのです。
この点を回避するため、１行で表示していたtrを、スマホで表示した時のみ途中で折り返してCSSで対応する予定だったのですが、この方法は不可能だという結論に達しております。
floatを設定してもだめ、trを二重に設定してもだめ、どうやっても無理でした。
つまり、私が試みたのは以下のような設定です。
■ＰＣ閲覧時は通常での表示
＜tr＞
td td td td td td
＜/tr＞
■スマホでの閲覧時は折り返して半分の横幅に
＜tr＞
td td td
td td td
＜/tr＞
これの実装は技術的に不可能と判断したため、途中で断念しております。
tableではなく、＜div＞などを使用すれば、スタイルシートの方で対応できることは知ってますが、文中に＜div＞を使うのはウェブ作成者として邪道と考えておりますので、別の方法を探ってみました。
そこで最終的に取り入れた方法は、tdを間引きすることで横幅を減らすという手段をとっております。
つまり、以下のような手法です。
＜tr＞
td td ＜td＝class"example"＞ td td td
＜/tr＞
などとしておき、cssのほうで.example {display:none}などと記述して、スマホで表示した際には簡略化した形で表示しようというわけです。
なので、ＰＣサイトよりも、スマホサイトの方が情報量が減少してしまいますが、この方法が一番よいのではないかと考えました。
ただ、一方で、スタイルシート側で強制的にコンテンツを非表示にするわけですから、SEO対策的に妥当なのかどうかという懸念があります。
いわゆる「隠しテキスト」みたいな形で判断されまいかという懸念がございますが、一応、ＰＣサイト上では完全な形で表示しておりますし、スマホへの対応は検索エンジン側でも推奨しているわけですので、このような使い方はまったく問題ないようです。
tableタグのレスポンシブ化でお悩みの方は、CSSで非表示にして、簡略化して表示させる方法もご検討されてみてはいかがかと思います。