bootstrap3 表？を作りたい

Question

いつもお世話になっております。

###前提・実現したいこと
bootstrap3

添付資料のような画面をbootstrap3を利用して作成したい。

画面サイズが小さくなっても、スクロールバーがでず、
また、各々の項目が小さくなるにつれ、縦に積み重ねられるため、
添付資料のような画面にできません。
いろいろと試して見ていますが、はまってしまい・・・

何か、こういう事をやっているサンプル画面がありませんか？
不動産のサイトのソースをみても、オリジナルのCSSぽいので・・

何のキーワードで、サンプルを探せばいいのかも想像つかず、
皆さんのお知恵をお借りしたく、投稿しました。
検索ワードや、ヒントでも構いませんので、ご教授ください。

いつも、教えてクレクレで申し訳ありませんが、どなたか
お付き合い頂ければと。。。よろしくお願いします。

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

<div class="container">
	<div class="row">
		<div class="col-xs-12">
			<div class="table-responsive">
				<table class="table table-bordered">
					<tbody>
						<tr>
							<td>
								<table class="table">
									<tr>
										<td rowspan="4" class="col-xs-2">
											<img src="kaoimg/kao-jyosei-01.jpeg" alt="kao-jyosei-01" width="50%" height="50%" class="img-responsive center-block">
										</td>
										<td class="col-xs-8" style="table-layout: fixed;">
											<div class="form-inline">
												<div class="input-group col-xs-4">
													<span class="input-group-addon">氏名</span>
													<input type="text" class="form-control" id="namae-eng" placeholder="hogehoge" readonly>
												</div>
												<div class="input-group col-xs-2">
													<span class="input-group-addon">性別</span>
													<input type="text" class="form-control" id="namae-eng" placeholder="男性" readonly>
												</div>
												<div class="input-group col-xs-3">
													<span class="input-group-addon">生年月日</span>
													<input type="text" class="form-control" id="namae-eng" placeholder="1911/11/11" readonly>
												</div>
												<div class="input-group col-xs-2">
													<span class="input-group-addon">年齢</span>
													<input type="text" class="form-control" id="namae-eng" placeholder="23歳" readonly>
												</div>
											</div>
										</td>
									</tr>
									<tr>
										<td class="col-xs-8">
											<div class="form-inline">
												<div class="input-group col-xs-3">
													<span class="input-group-addon">ほげほげ</span>
													<input type="text" class="form-control" id="namae-eng" placeholder="hogehoge" readonly>
												</div>
												<div class="input-group col-xs-3">
													<span class="input-group-addon">ほげほげ日</span>
													<input type="text" class="form-control" id="namae-eng" placeholder="2016/11/11" readonly>
												</div>
												<div class="input-group col-xs-3">
													<span class="input-group-addon">ほげほげ日</span>
													<input type="text" class="form-control" id="namae-eng" placeholder="2019/11/11" readonly>
												</div>
												<div class="input-group col-xs-2">
													<span class="input-group-addon">ほげほげ</span>
													<input type="text" class="form-control" id="namae-eng" placeholder="hogehoge" readonly>
												</div>
											</div>
										</td>
									</tr>
									<tr>
										<td class="col-xs-8">
											<div class="form-inline">
												<div class="input-group col-xs-3">
													<span class="input-group-addon">ほげほげ</span>
													<input type="text" class="form-control" id="namae-eng" placeholder="hogehoge" readonly>
												</div>
												<div class="input-group col-xs-3">
													<span class="input-group-addon">ほげほげ</span>
													<input type="text" class="form-control" id="namae-eng" placeholder="hogehoge" readonly>
												</div>
												<div class="input-group col-xs-3">
													<span class="input-group-addon">婚姻</span>
													<input type="text" class="form-control" id="namae-eng" placeholder="既婚" readonly>
												</div>
												<div class="input-group col-xs-2">
													<span class="input-group-addon">子供</span>
													<input type="text" class="form-control" id="namae-eng" placeholder="あり" readonly>
												</div>
											</div>
										</td>
									</tr>
									<tr>
										<td class="col-xs-8">
											<div class="form-inline">
												<div class="input-group col-xs-3">
													<span class="input-group-addon">分類</span>
													<input type="text" class="form-control" id="namae-eng" placeholder="hogehoge" readonly>
												</div>
												<div class="input-group col-xs-3">
													<span class="input-group-addon">分類</span>
													<input type="text" class="form-control" id="namae-eng" placeholder="hogehoge" readonly>
												</div>
												<div class="input-group col-xs-3">
													<span class="input-group-addon">分類</span>
													<input type="text" class="form-control" id="namae-eng" placeholder="hogehoge" readonly>
												</div>
												<div class="input-group col-xs-2">
													<a href="#"><button type="submit" class="btn btn-default btn-xs">詳細</button></a>
												</div>
											</div>
										</td>
									</tr>
								</table>
							<td>
						</tr>
					</tbody>
			 </table>
			</div>
		</div>
	</div> <!-- row -->
</div>	 <!-- container -->

###試したこと
課題に対してアプローチしたことを記載してください

###補足情報(言語/FW/ツール等のバージョンなど)
従前からも、gridシステムで作った方がいいとご指導頂いて
いますが、なかなか慣れず、テーブルを多用してしまってます。

Answer 1

例えば高さ固定のdivの中に固定幅のtableを入れてって感じですよね？
これはbootstrapなどのレスポンシブCSSフレームワークとは相反するものなので、この部分のみ独自で作るほかありません。

もちろんできなくはないです。
高さ固定のdivにclassを振って内包する要素に固定値を与えていって上書き(各ブレークポイントすべて)など。
ですがかなり煩雑になると思います。

bootstrapを利用するのであれば、できればグリッドシステムに合わせて制作することをおすすめします。
が、それぞれの事情があると思うのでtable部分は独自で組むのがいいですかね。

あとフォームの見た目が気になるのであれば、

<div class="form-inline">
	<div class="input-group">
		<span class="input-group-addon">氏名</span>
		<input type="text" class="form-control" id="namae-eng" placeholder="hogehoge" readonly="">
	</div>
</div>

このセットで他の部分と統一できますが、レスポンシブなので新たにclassを振るなりして固めておくといいと思います。

Comments

[tsuru0508]

いつもありがとうございます。
bootstrap3だけでは、解決できない事が分かっただけでも進歩です。
今、自分の行いたいホームページのサンプルを探しています。
ありがとうございます。ちょっと色々とやってみます。

[tsuru0508]

大変申し訳ありませんが、１つヒントをください。

ご指導のとおり、CSSを新たに作成して、fixedやnowrapをかけ、
また、DIVでスクロールバーが出るように、autoscrollなどを使い
だいたいイメージ通りになってきましたが、画面サイズが「XS」に
なると、努力の甲斐むなしく、インプットなどが縦積みになってしまいます。

XSになっても、NOWRAPしないヒントを頂けませんか？

申し訳ありませんが、何卒・・・よろしくお願いします。。

[gin]

上記にも書きましたが、スタイルは固めていますか？？
PC版くらいの幅だと、
-------
.form-inline .input-group {
display: inline-table;
vertical-align: middle;
}
-------
がかかっていると思うので、
-------
.XXXXX .form-inline .input-group {
display: inline-table;
vertical-align: middle;
}
-------
という感じに他に影響されないように固めておきます。

[tsuru0508]

お世話になっております。
早々のご助言ありがとうございます。

固定という意味を理解していませんでした。
まだ、サンプルソースの意味を理解できていませんので、
一回やってみて、また如何にもならなくなった時、
またご助言よろしくお願いします。

いつもありがとうございます。

[gin]

「.XXXXX」はtableか何かにclass設定してると思うので、それのことです。
要するにこのtable以外の.form-inlineには影響を与えないようにしてる感じです。

[tsuru0508]

ginさん
いつもありがとうございます。
また、何から何まで、ご指導ありがとうございます。
お陰様で、ほぼ実施したい事ができるようになりました。
今後とも、是非、ご指導よろしくお願いします。