bootstrap3のメディアクエリ？について

Question

###前提・実現したいこと
連続投稿すいません。前回の疑問と少々違うので
トピックを分けました。

よろしくお願いします。

bootstrap3
col-xs のサイズまで画面が小さくなれば、きちんと表示されますが、
col-xsからcol-smの間くらいの画面幅だと表示が崩れます。
特にipadで縦にした時に発生します。

これもこんなものだと諦めるしかないのでしょうか？

###該当のソースコード

<form class="form-inline">
<div class="container">
	<div class="row">
		<div class="col-xs-12 col-sm-2">
			<table class="table table-bordered">
				<tbody>
					<tr>
						<td>
							<img src="kaoimg/kao-jyosei-01.jpeg" alt="kao-jyosei-01" width="185" height="273" class="img-responsive center-block">
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="col-xs-12 col-sm-5">
				<table class="table">
					<tbody>
						<tr>
							<td class="col-xs-6">
								<div class="input-group">
									<span class="input-group-addon">ｼｽﾃﾑID</span>
									<input type="text" class="form-control" id="sysid" style="width:80px;text-align: right;" value="121212" readonly>
								</div>
							</td>
							<td class="col-xs-6">
								<div class="input-group">
									<span class="input-group-addon">○○○NO</span>
									<input type="text" class="form-control" id="manid" style="width:80px;text-align: right;"  value="3423687">
								</div>
							</td>
						</tr>
						<tr>
							<td colspan="2" class="col-xs-12">
								<div class="input-group">
									<span class="input-group-addon">氏名（漢字）</span>
									<input type="text" class="form-control" id="namae" placeholder="名前を入力します。">
								</div>
							</td>
						</tr>
						<tr>
							<td colspan="2" class="col-xs-12">
								<div class="input-group">
									<span class="input-group-addon">氏名（カナ）</span>
									<input type="text" class="form-control" id="namae-kana" placeholder="名前をカナで入力します。">
								</div>
							</td>
						</tr>
						<tr>
							<td colspan="2" class="col-xs-12">
								<div class="input-group">
									<span class="input-group-addon">氏名（英字）</span>
									<input type="text" class="form-control" id="namae-eng" placeholder="名前を英字（英語）で入力します。">
								</div>
							</td>
						</tr>
						<tr>
							<td class="col-xs-6">
									<div class="input-group">
										<span class="input-group-addon">生年月日</span>
										<input type="text" class="form-control datepicker" style="width:100px;" id="bod" placeholder="誕生日を選択します。">
									</div>
							</td>
							<td class="col-xs-6">
									<div class="input-group">
										<span class="input-group-addon">年齢</span>
										<input type="text" class="form-control" style="width:50px;text-align: right;" value="20" readonly>歳
									</div>
							</td>
						</tr>
						<tr>
							<td class="col-xs-6">
									<div class="radio-inline">
										<input type="radio" value="1" name="gender" id="man">
										<label for="man">男性</label>
									</div>
									<div class="radio-inline">
										<input type="radio" value="2" name="gender" id="woman">
										<label for="woman">女性</label>
									</div>
							</td>
							<td class="col-xs-6">
								<div class="input-group">
									<span class="input-group-addon">○○○</span>
									<input type="text" class="form-control" id="manid" style="width:100px;"  value="○○○">
								</div>
							</td>
						</tr>
					</tbody>
				</table>
		</div>
		<div class="col-xs-12 col-sm-5">
				<table class="table">
					<tbody>
						<tr>
							<td class="col-xs-6">
								<div class="form-group">
									<div class="input-group">
										<span class="input-group-addon">○○○○○○</span>
										<label class="sr-only" for="InputSelect">選択</label>
										<select class="form-control" id="InputSelect">
											<option>１級</option>
											<option selected>二級</option>
											<option>三級</option>
										</select>
									</div>
								</div>
							</td>
							<td class="col-xs-6">
								<div class="form-group">
									<div class="input-group">
										<span class="input-group-addon">○○○○○○</span>
										<label class="sr-only" for="InputSelect">選択</label>
										<select class="form-control" id="InputSelect">
											<option>○○○</option>
											<option selected>○○○</option>
											<option>○○○</option>
										</select>
									</div>
								</div>
							</td>
						</tr>	
						<tr>
							<td class="col-xs-6">
								<div class="input-group">
									<span class="input-group-addon">○○○○○○</span>
									<input type="text" class="form-control datepicker" style="width:100px;" id="startdate" placeholder="○○○○○○を選択します。">
								</div>
							</td>
							<td class="col-xs-6">
								<div class="input-group">
									<span class="input-group-addon">○○○</span>
									<input type="text" class="form-control datepicker" style="width:100px;" id="enddate" placeholder="○○○を選択します。">
								</div>
							</td>
						</tr>							

						<tr>
							<td colspan="2">
								<div class="form-group">
									<label class="sr-only" for="qqq-1">▼選択</label>
                   					<select class="form-control group2" name="qqq-1" id="lv11">
	                   					<option value="0">▼選択</option>
										<option value="1">A関係</option>
										<option value="2">B関係</option>
										(長くなるので省略）
                    				</select>
								</div>
							</td>
						</tr>
						<tr>
							<td colspan="2">
								<div class="form-group">
									<label class="sr-only" for="qqqqq-2">▼選択</label>
									<select name="qqqq-2" id="lv12" class="form-control group2" disabled="disabled">
										<option value="0">▼選択</option>
										<option value="101" class="p1">aaaaa</option>
										<option value="102" class="p1">bbbbb </option>
										(長くなるので省略）
                    				</select>
								</div>
							</td>
						</tr>
						<tr>
							<td colspan="2">
								<div class="form-group">
									<label class="sr-only" for="wwwww-2">▼選択</label>
									<select name="wwwww-3" id="lv13" class="form-control group2" disabled="disabled">
										<option value="0">▼選択</option>
										<option value="10101" class="p101">aaaaa</option>
										<option value="10102" class="p101">vvvvvv</option>
										(長くなるので省略）
									</select>
								</div>

							</td>
						</tr>
					</tbody>
				</table>
		</div>
	</div> <!-- /.row -->
</div> <!-- /.container -->
</form>

###補足情報(言語/FW/ツール等のバージョンなど)
bootstrap3

Answer 1

imgやinputにwidth: 100px;などの固定値が入っているので突き抜けているようですね。

Comments

[tsuru0508]

先ほどといい、ありがとうございました。
固定値の良し悪しがありますね。デザイン分野が苦手なので、
bootstrapに手を出しましたが、難しいですね。

Answer 2

元の質問でも回答させていただきましたが、tableタグの場合レスポンシブの動きを実現することに限界があります。
tableの場合tr,tdで表の組み方が固定されてしまうため、デバイスによって横幅を変えることしかできません。
divでグリッドシステムを使用すれば、画面の大きさによってに表組みを変えることが可能です。
Grid System

Comments

[tsuru0508]

ありがとうございます。仰せのとおり、DIVタグで表を作ってみたら、
重なることはなくなりました。
が、今度は中の文字が見れないくらいテキストボックスが小さくなるので、
ipadが縦向きになったときは、.col-xsで表示するようにならないでしょうか？

[ShoheiTai]

col-xs、col-sm、col-mdなどcol-○○を使うことで
画面の大きさに応じたグリッドを組むことができます。
class="col-xs-6 col-md-12"
といったように使います。

[tsuru0508]

返信頂いていたのに、気づかずすいません。
col-xs と col-smの間くらいの大きさなので、col-sm扱いになります。
すると、画面が崩れて・・・いっその事、ipadの縦は、col-xs扱いだと
いいなと思いました。やっぱり、難しいですよね。。。