table タグで３列の表を作るとスマホ、iPhone 右側途切れます。

以下のようにtable タグで３列の表を作るとスマホ、iPhone　右側途切れてしまいます。
Androidだと右側の画像だけ大きくなります。　画像はすべて同じサイズです。
どうしたら解決できるのでしょうか？




CSS

.ta_nin { width: 100%; padding: 10px; border: dotted 1px black; }
.td_nin { background-color: #f9f89f; width: 30%; padding: 10px; }
.img_nin { width: 25%;}
.table-wrap {
overflow: scroll;
}

HTML
<table class="ta_nin">
<tbody>
<tr>
<td class="td_nin">人の名前</td>

<td class="td_nin">人の名前</td>

<td class="td_nin">人の名前</td>
</tr>
<tr><td class="td_nin"><img class="img_nin" src="http://touchingcare.net/wp-content/themes/sample … alt="" border="0" /></td>
</td><td class="td_nin"><img class="img_nin" src="http://touchingcare.net/wp-content/themes/sample … alt="" border="0" /></td>
</td><td class="td_nin">
<img class="img_nin" src="http://touchingcare.net/wp-content/themes/sample … alt="" border="0" /></td>
</tr>
</tbody>
</table>

質問者からの補足コメント

• t_fumiakiさま
  
  ありがとうございます。　確かに初歩的なミスをしていました。
  直しましたが、同じです。　Androidは、幅を１００％から７０％としますと
  反応しますが、iPhoneは、何％にしようが、まった画像の状態と変わりません。

  No.1の回答に寄せられた補足コメントです。 補足日時：2016/01/17 17:17

No.3 ベストアンサー 回答者： ORUKA1951 回答日時： 2016/01/18 19:35

文書構造上全く意味のないclass名なんてつけない。

tabe(表データ)としてもよいのですが、これは単純なリストのほうが良いでしょうね。
<ol class="Members List"><!-- idやclassはその要素に意味を持たせるためのもの -->
　<li>人物名
　　　<ol>
　　　　<li><img src="" width="" height="" alt=""></li>
　　　　<li>肩書</li>
　　　</ol>
　</li>
　<li>人物名
　　　<ol>
　　　　<li><img src="" width="" height="" alt=""></li>
　　　　<li>肩書</li>
　　　</ol>
　</li>
・・・・
あとはスタイルシートでご自由に・・・
狭いスマホだと２列にするとか、幅広や横置きなら４列にするとか・・。ページ幅いっぱいにするのも楽だし、ガラケーならリストで、パソコンなら６列とか・・

この回答へのお礼

ORUKA1951さん
ありがとうございます。やってみます。

お礼日時：2016/01/18 20:38

No.2 回答者： xs200 回答日時： 2016/01/17 22:40

<meta name="viewport" content="width=device-width" />

これでだめなら
<meta name="viewport" content="width=xxx" />
xxxはページのピクセル数

cssには
html,body{
width: 100%;
}
を加える


これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ
http://tech.nitoyon.com/ja/blog/2013/02/15/viewp …

この回答へのお礼

xs200さん

ありがとうございます。　ですが、これはやっています。

お礼日時：2016/01/18 20:39

No.1 回答者： t_fumiaki 回答日時： 2016/01/17 16:48

取り敢えずpcでは間違いはあるものの正しいです。

・padding: 10px; ⇒％にする
・</td></td>となってるのを</td>にする（これは間違い）。
として見ては？