感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

bootstrapを使って、tableのセルいっぱいにフォームを広げて表示してみる

<スポンサーリンク>

1.前提

前提となる環境はSpring-mvcで、bootstrapを取り込んでいる。
前回の記事→http://programming-10000.hatenadiary.jp/entry/20140204/1391521592
しかし、今回のサンプルはBootstrapの使い方の部分にフォーカスを当てているため、特に影響はない。

2.基礎

まず、色々と調べていて非常に役に立ったのが、「JSFIDDLE」だ。
http://jsfiddle.net/
ここでBootstrapを取り込んで、HTMLを書いて稼働確認することができる。

フォームは以下のリンクを参考にした。
http://getbootstrap.com/css/
Bootstrapのselect optionフォームは以下のように書く。

<select class="form-control">
	<option value="160">~160</option>
	<option value="170">160~170</option>
	<option value="180">170~180</option>
</select>

その他のBootstrapのサンプルは別の記事にまとめる。

3.サンプル

ヘッダ部分はjspっぽくなっているので省略。
bootstrapやjqueryを取り込んでいる。
以下のチュートリアルを読んだら丁寧に説明されている。
http://getbootstrap.com/getting-started/

HTMLのbodyの部分。

<body>
<h2>テーブルのセルにフォームをつっこむ</h2>
<br/>
<br/>
<label>クラス名簿:</label>
<table class="table table-striped table-bordered table-condensed">
	<thead>
		<tr>
			<th>名前</th>
			<th>身長</th>
			<th>電話番号</th>
		</tr>
	</thead>
	<tr>
		<td><input type="text" class="form-control input-normal" placeholder="名前を入れてね" id="name"></td>
		<td>
			<select class="form-control">
				<option value="160">~160</option>
				<option value="170">160~170</option>
				<option value="180">170~180</option>
			</select>
		</td>
		<td><input type="text" class="form-control input-normal" placeholder="電話番号入れて!" id="name"></td>
	</tr>
	<tr>
		<td><input type="text" class="form-control input-normal" placeholder="名前を入れてね" id="name"></td>
		<td>
			<select class="form-control">
				<option value="160">~160</option>
				<option value="170">160~170</option>
				<option value="180">170~180</option>
			</select>
		</td>
		<td><input type="text" class="form-control input-normal" placeholder="電話番号入れて!" id="name"></td>
	</tr>
</table>
</body>

4.デモ

以下のように表示される
f:id:sho322:20140204225001j:plain

上のデモでは少しスキマがあいているので、それを完全に詰めて、以下のようにしたい場合。
f:id:sho322:20140204225013j:plain

そのときは、新しくcssファイルを作って、

td{
	padding:0 !important;
	margin:0 !important;
}

のようにして、!importantをつけて、paddingとmarginを0に設定すればいい。