概要

前回の続き
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>

次回

続きはこちら