![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?c9bd177)
以下のようにtable タグで3列の表を作るとスマホ、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>
![「table タグで3列の表を作るとスマホ」の質問画像](http://oshiete.xgoo.jp/_/bucket/oshietegoo/images/media/b/535963_569b41066c967/M.jpg)
No.3ベストアンサー
- 回答日時:
文書構造上全く意味のない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>
・・・・
あとはスタイルシートでご自由に・・・
狭いスマホだと2列にするとか、幅広や横置きなら4列にするとか・・。ページ幅いっぱいにするのも楽だし、ガラケーならリストで、パソコンなら6列とか・・
No.2
- 回答日時:
<meta name="viewport" content="width=device-width" />
これでだめなら
<meta name="viewport" content="width=xxx" />
xxxはページのピクセル数
cssには
html,body{
width: 100%;
}
を加える
これがスマートフォン向けサイトを作るときの viewport 設定3パターンだ
http://tech.nitoyon.com/ja/blog/2013/02/15/viewp …
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_16.png?c9bd177)
No.1
- 回答日時:
取り敢えずpcでは間違いはあるものの正しいです。
・padding: 10px; ⇒%にする
・</td></td>となってるのを</td>にする(これは間違い)。
として見ては?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- Perl PERL 1 2022/04/26 14:15
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブルの一部分のセルだけに...
-
vbscriptで時計を作りたい
-
html でのテキスト結合について
-
tableタグとformタグの組み合わせ
-
商品一覧をtableタグで表示する
-
cssで、テーブルのtdの中の文字...
-
テーブルタグの中にdivを含めて...
-
CSSで文字を一番下の中央に表示...
-
テーブルの位置を細かく指定し...
-
画像と、セルのつなぎ目に白い...
-
画面サイズを取得し、テーブル...
-
一つのテーブル内の文字色だけ...
-
htmlのtable内に画像
-
width指定したTDでwhite-space:...
-
テーブルの上に空行が入る・・...
-
tableの位置がIEとその他ブラウ...
-
nowrapを指定しても改行される...
-
テーブルの縦罫線を1本だけ細く...
-
textareaの外側の文字が下付き...
-
テーブルの行の高さを指定する...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
tableタグとformタグの組み合わせ
-
html でのテキスト結合について
-
テーブルの一部分のセルだけに...
-
同じクラス名はつけないほうが...
-
テーブル内のテーブルの高さを...
-
cssで、テーブルのtdの中の文字...
-
XHTMLに関する質問 順序が逆に...
-
vbscriptで時計を作りたい
-
Tableタグで作成した表の縮小
-
Tableタグ内のspan styleが適応...
-
formのinputなどの幅100%指定
-
Firefoxを使ってるのですがズー...
-
divで囲んだ文字が消える
-
商品詳細を横並びに表示する方法
-
表とリスト(ulとtable)の違い...
-
入れ子にしたテーブルをheight1...
-
TDタグ内での均等割付の仕方
-
テーブルのセル内の隙間を取れ...
-
td要素内のdiv要素をセンタリン...
-
HTMLのテーブルでそれぞれの大...
おすすめ情報
t_fumiakiさま
ありがとうございます。 確かに初歩的なミスをしていました。
直しましたが、同じです。 Androidは、幅を100%から70%としますと
反応しますが、iPhoneは、何%にしようが、まった画像の状態と変わりません。