概要
- 前回の続き
- bootstrapのバージョンは3.7を使っている
- https://getbootstrap.com/docs/3.3
- 動作確認のための準備はこちら
今回の内容
- テーブルの表示のしかた
- だいたいドキュメントに載っているものそのまま
- http://getbootstrap.com/docs/3.3/css/#tables
シンプルなパターン
- class属性にtableをつけるだけ
index.html
<div class="container">
<table class="table">
<thead>
<tr>
<th>名前</th>
<th>背番号</th>
<th>投/打</th>
<th>ポジション</th>
</tr>
</thead>
<tbody>
<tr>
<td>有原航平</td>
<td>16</td>
<td>右/右</td>
<td>投手</td>
</tr>
<tr>
<td>西川遥輝</td>
<td>7</td>
<td>右/左</td>
<td>外野手</td>
</tr>
<tr>
<td>中島卓也</td>
<td>9</td>
<td>右/左</td>
<td>内野手</td>
</tr>
</tbody>
</table>
</div>
罫線を入れる
- 縦横に罫線を入れて表っぽくする
-
table-borderedを追加しただけ
index.html
<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<th>名前</th>
<th>背番号</th>
<th>投/打</th>
<th>ポジション</th>
</tr>
</thead>
<tbody>
<tr>
<td>有原航平</td>
<td>16</td>
<td>右/右</td>
<td>投手</td>
</tr>
<tr>
<td>西川遥輝</td>
<td>7</td>
<td>右/左</td>
<td>外野手</td>
</tr>
<tr>
<td>中島卓也</td>
<td>9</td>
<td>右/左</td>
<td>内野手</td>
</tr>
</tbody>
</table>
</div>
セル内で改行させたくない場合
- デフォルトだとウィンドウサイズが縮まるとテーブルも小さくなり内容が改行される
-
text-nowrapで改行させないで表示させることができる -
thやtdにひとつひとつつけても適用されるがそれは面倒なのでまとめて指定することもできる
tableにtext-nowrapをつける
- tableタグにつけるとそのテーブルではセル内で改行されなくなる
- 画面に収まらなければ横スクロールすることになる
index.html
<div class="container">
<table class="table table-bordered text-nowrap">
<thead>
<tr>
<th>名前</th>
<th>背番号</th>
<th>投/打</th>
<th>ポジション</th>
<th>推定年俸</th>
</tr>
</thead>
<tbody>
<tr>
<td>有原航平</td>
<td>16</td>
<td>右/右左</td>
<td>投手</td>
<td>6000万</td>
</tr>
<tr>
<td>西川遥輝</td>
<td>7</td>
<td>右/左</td>
<td>外野手</td>
<td>10000万</td>
</tr>
<tr>
<td>中島卓也</td>
<td>9</td>
<td>右/左</td>
<td>内野手</td>
<td>10000万</td>
</tr>
</tbody>
</table>
</div>
theadにtext-nowrapをつける
- thead内だけ改行されなくなる
tbodyにtext-nowrapをつける
- tbody内だけ改行されなくなる
パネルの中にテーブルを入れる
index.html
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">テーブル1</div>
<table class="table">
<thead>
<tr>
<th>名前</th>
<th>背番号</th>
<th>投/打</th>
<th>ポジション</th>
</tr>
</thead>
<tbody>
<tr>
<td>有原航平</td>
<td>16</td>
<td>右/右</td>
<td>投手</td>
</tr>
<tr>
<td>西川遥輝</td>
<td>7</td>
<td>右/左</td>
<td>外野手</td>
</tr>
<tr>
<td>中島卓也</td>
<td>9</td>
<td>右/左</td>
<td>内野手</td>
</tr>
</tbody>
</table>
</div>
</div>
- テーブルに検索フォームを追加するとこんな感じ
- 検索フォームは
panel-bodyに入れている
index.html
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">テーブル1</div>
<div class="panel-body">
<form class="form-inline">
<div class="form-group">
<label class="control-label">名前</label>
<input class="form-control" style="width: 200px;" type="text">
</div>
<div class="form-group">
<label class="control-label">ポジション</label>
<select class="form-control" style="width: 200px;">
<option>投手</option>
<option>捕手</option>
<option>内野手</option>
<option>外野手</option>
</select>
</div>
<button class="btn btn-default">検索</button>
</form>
</div>
<table class="table">
<thead>
<tr>
<th>名前</th>
<th>背番号</th>
<th>投/打</th>
<th>ポジション</th>
</tr>
</thead>
<tbody>
<tr>
<td>有原航平</td>
<td>16</td>
<td>右/右</td>
<td>投手</td>
</tr>
<tr>
<td>西川遥輝</td>
<td>7</td>
<td>右/左</td>
<td>外野手</td>
</tr>
<tr>
<td>中島卓也</td>
<td>9</td>
<td>右/左</td>
<td>内野手</td>
</tr>
</tbody>
</table>
</div>
</div>
次回
- 続きはこちら