Tableのレスポンシブ対応、教えて下さい

wordpressでホームページを作っています。
テーブル（３✖️３のテーブルに写真）を使って写真を表示しているのですが、レスポンシブ対応で、スマホ表示になった時に、テーブルの幅を画面に合わせて縮小したいのですが（テーブルの形はそのままに全画面表示にしたい）、cssでtableのwidthを100%にしても画面幅からはみ出してしまいます。
どのような方法があるのでしょうか？
教えて下さい。

No.4 回答者： ごんじろう 回答日時： 2015/08/23 15:34

レスポンシブっていうより、リキッドでいいのでは？

つまり、親tableに対して子tdはパーセントで幅を決めてやる。3枚なら、33.3％だし、4枚なら25%。

style------
table{width:100%;}
td{width:33.3%;}
td img{width:100%;}



html-------
<table>
<tr>
<td><img src="写真.jpg" alt=""></td>
<td><img src="写真.jpg" alt=""></td>
<td><img src="写真.jpg" alt=""></td>
</tr>
<tr>
<td><img src="写真.jpg" alt=""></td>
<td><img src="写真.jpg" alt=""></td>
<td><img src="写真.jpg" alt=""></td>
</tr><tr>
<td><img src="写真.jpg" alt=""></td>
<td><img src="写真.jpg" alt=""></td>
<td><img src="写真.jpg" alt=""></td>
</tr>
</table>

No.3 回答者： ORUKA1951 回答日時： 2015/08/18 19:37

＞

http://necomesi.jp/staff/shimada/responsive-table/
のようなことがしたいのですが・・・
　レスポンシブとは程遠い、javascriptを使用して描画--文字サイズを含めて--を制御していますね。文字サイズが一緒に縮小されたのではまずいのじゃないかと・・

　ウェブ開発でしたら、開発ツールの豊富なfirefxをお使いだと思いますが、そのアドオンweb developerとかfirebugでjavascriptを無効にしてみるとか、FireMobileSimulatorでユーザーエージェントを変更してみるとか。

　繰り返しになりますが、レスポンシブとは、ウィンドウの横幅でスタイルシートを切り替える手法です。リキッドでデザインされたページに対して、それでは対処できない場合に使用します。
　具体的には、３列の段組みされているものを、狭いディスプレイでは２段や１段にするとか、
┌─────────┐
├─┬─────┬─┤　幅広ディスプレイ
│・│・・・・・│・│　ウィンドウ幅が変わっても表示幅は追随して
　navi　　本文　aside　変化する。
　　　　↓
┌─────┐
├─────┤
│・・・・・│　　　　　　レスポンシブ
～～～～～～～　スマホ　　指定された幅よりさらに小さくなると、
├─────┤　　　　　　デザイン自体が変化する。
│・・navi・│
├─────┤
│・aside ・│

　なお、javascriptを使用すると携帯電話やjavascriptを無効にしているブラウザでは利用できません。また携帯電話では・・

★レスポンシブは現在は、mediaqueryを使います。
MediaQuery まとめ - IT戦記( http://d.hatena.ne.jp/amachang/20080425/1209139140 )
　がわかりやすいかな。ほかにもたくさんあります。

　さて、本題の画像を３列３行、計９枚並べる手法ですが、別にtableを使う必要はありません。もし、それが表データでない場合はtableを使うべきではありません。
　どのような画像で、どういう理由で3×３なのかが示されていませんので具体的なマークアップは不可能です。
　★HTMLは文書構造を示すもの、スタイルシートはプレゼンテーションの指定。この区別をきちんとしておかないと・・

No.2 回答者： ORUKA1951 回答日時： 2015/08/17 11:32

まず、最も基本的で重要なことですが、15年前HTML4.01が勧告されて依頼

『単に文書内容を整形する目的だけで表を用いるべきでない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
　tableはあくまで二次元データを現すもの・・列は金額、行は日付とか・・・
　そのために、デザインのために
＞テーブル（３✖️３のテーブルに写真）を使って写真を表示している
　ことは根本的に誤りです。

＞レスポンシブ対応で、スマホ表示になった時に、
　レスポンシブは、HTML4.01,CSS2.1時代のメディア別スタイルシートの拡張です。
　その前提として、リキッドデザインなのですよ。リキッドだけでは対応できないときにレスポンシブをつかいます。

★例えば次のようにマークアップします。
<ul id="photoAlbam">
　<li><img src="" width="" height="" alt="">
　　<p>山中湖からの富士山</p>
　</li>
　<li><img src="" width="" height="" alt="">
　　<p>河口湖からの富士山</p>
　</li>
・・・
スタイルシートで
ul#photoAlbum{margin:0;padding0;border:none;text-align:center;}
ul#photoAlbum li{display:inline-block;width:30%;position:relative;}
ul#photoAlbum li img{width:100%;height:auto;}
ul#photoAlbum li p{text-align:left;}
とか・・
あるいは、
ul#photoAlbum{margin:0;padding0;border:none;text-align:center;}
ul#photoAlbum li{display:inline-block;width:30%;min-width:200px;position:relative;}
ul#photoAlbum li img{width:100%;height:auto;}
として、狭いディスプレイだと2列にするとか・・

この回答へのお礼

HTML4.01の勧告、及びリキッドデザインについて調べました。
とても勉強になりました。ありがとうございます。

ただ、この３✖️３の形を崩さずに小さくしていきたいのですが、
教えていただいたやり方を試してみたのですが
私が未熟なためかうまくいきません。
せっかく教えていただいたのにすみません。

http://necomesi.jp/staff/shimada/responsive-table/
のようなことがしたいのですが・・・

お礼日時：2015/08/17 17:53

No.1 回答者： yambejp 回答日時： 2015/08/17 10:53

ユーザーエージェントをみて振り分けするのが賢明かと

この回答へのお礼

解答ありがとうございます。
しかし、初心者の私には少し難しいですね。
@media screen and (max-width: **px)
で振り分けているのですが・・・

考えてみます。
ありがとうございました。１

お礼日時：2015/08/17 17:54