bootstrapを使って行が縦ではなく横に増えるテーブルを作りたい！

# 概要

普通テーブルを作るとレコードは縦方向に行が増えていくが、レコードが増えた時に横にレコードが表示されるようにしたいと思ってbootstrapを使って試してみた。

# 普通は縦に増える


###### イメージ↓

<img width="341" alt="スクリーンショット 2017-06-06 14.51.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/142511/4afb0ff0-923f-7cfe-0c67-226a96fda134.png">

このテーブルに、メロンとぶどうといちごの３つのレコードを追加```<tr></tr>```タグで追加すると、

###### イメージ↓
![スクリーンショット 2017-06-06 15.05.03（2）.png](https://qiita-image-store.s3.amazonaws.com/0/142511/a09ba9f2-e6e2-76e0-0ba8-dc3a705e75b7.png)

となる。


###### ソース↓

```html:html
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
    <p>テーブル</p>
    <div class="container table-responsive">
        <table class="table table-striped table-bordered">
            <tr class="success">
                <td class="td-id">ID</td>
                <td class="td-name">商品名</td>
                <td class="td-price">値段</td>
            </tr>
            <tr>
                <td>1</td>
                <td>りんご</td>
                <td>120</td>
            </tr>
            <tr>
                <td>2</td>
                <td>バナナ</td>
                <td>100</td>
            </tr>
            <tr>
                <td>3</td>
                <td>みかん</td>
                <td>80</td>
            </tr>
            <tr>
                <td>4</td>
                <td>メロン</td>
                <td>880</td>
            </tr>
            <tr>
                <td>5</td>
                <td>ぶどう</td>
                <td>400</td>
            </tr>
            <tr>
                <td>6</td>
                <td>いちご</td>
                <td>480</td>
            </tr>
        </table>
    </div>
</body>
```

```css:css
    .td-id {
        width: 10px;
    }

    .td-name {
        width: 120px;
    }

    .td-price {
        width: 10px;
    }

    .container {
        max-width: 330px;
        margin-top: 10px;
    }
```

# 横に増やす

まず、同じようなカラム名(ここではID,商品名,値段)を持ったテーブルが必要なので、同じ構造のテーブルを追加。
しかしこれだけでは縦に追加されてしまう。

###### イメージ↓
![スクリーンショット 2017-06-06 15.09.07（2）.png](https://qiita-image-store.s3.amazonaws.com/0/142511/56993b70-35f8-cce3-4cef-29f14a03920b.png)

###### ソース↓

```html:html
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
    <p>テーブル</p>
    <div class="container table-responsive">
        <table class="table table-striped table-bordered">
            <tr class="success">
                <td class="td-id">ID</td>
                <td class="td-name">商品名</td>
                <td class="td-price">値段</td>
            </tr>
            <tr>
                <td>1</td>
                <td>りんご</td>
                <td>120</td>
            </tr>
            <tr>
                <td>2</td>
                <td>バナナ</td>
                <td>100</td>
            </tr>
            <tr>
                <td>3</td>
                <td>みかん</td>
                <td>80</td>
            </tr>
        </table>
    </div>
    <div class="container table-responsive">
        <table class="table table-striped table-bordered">
            <tr class="success">
                <td class="td-id">ID</td>
                <td class="td-name">商品名</td>
                <td class="td-price">値段</td>
            </tr>
            <tr>
                <td>4</td>
                <td>メロン</td>
                <td>880</td>
            </tr>
            <tr>
                <td>5</td>
                <td>ぶどう</td>
                <td>400</td>
            </tr>
            <tr>
                <td>6</td>
                <td>いちご</td>
                <td>480</td>
            </tr>
        </table>
    </div>
</body>
```


(cssは変えていません。)

## 横に追加するには、たった9文字を上のソースに加えてあげるだけでできます！!

###### イメージ↓ (これがやりたかったこと!!)

![スクリーンショット 2017-06-05 15.31.10（2）.png](https://qiita-image-store.s3.amazonaws.com/0/142511/481da3e1-0654-ce50-2a3a-c533b3467b76.png)



###### ソース↓

```html:html
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
  <p>テーブル</p> 
  <div class="container pull-left table-responsive"> #追加箇所
        <table class="table table-striped table-bordered">
            <tr class="success">
                <td class="td-id">ID</td>
                <td class="td-name">商品名</td>
                <td class="td-price">値段</td>
            </tr>
            <tr>
                <td>1</td>
                <td>りんご</td>
                <td>120</td>
            </tr>
            <tr>
                <td>2</td>
                <td>バナナ</td>
                <td>100</td>
            </tr>
            <tr>
                <td>3</td>
                <td>みかん</td>
                <td>80</td>
            </tr>
        </table>
    </div>
    <div class="container pull-left table-responsive"> #追加箇所
        <table class="table table-striped table-bordered">
            <tr class="success">
                <td class="td-id">ID</td>
                <td class="td-name">商品名</td>
                <td class="td-price">値段</td>
            </tr>
            <tr>
                <td>4</td>
                <td>メロン</td>
                <td>880</td>
            </tr>
            <tr>
                <td>5</td>
                <td>ぶどう</td>
                <td>400</td>
            </tr>
            <tr>
                <td>6</td>
                <td>いちご</td>
                <td>480</td>
            </tr>
        </table>
    </div>
</body>
```

# 解説

tableを囲んでいる```<div></div>```タグのクラス指定に、```pull-left```を追加してあげる！
（※1~3のレコードが入っているテーブルと4~6のレコードが入っているテーブル両方に対して。片方だけだと上手くいきません。）

# 因みに

bootstrapを使用しているため、ディスプレイの幅に合わせてレスポンシブにテーブルを折り返して表示してくれます。


###### ディスプレイいっぱいで５つテーブルが横に表示されている状態↓

![スクリーンショット 2017-06-06 16.11.38（2）.png](https://qiita-image-store.s3.amazonaws.com/0/142511/9fe7db87-646a-7b4f-1a61-a707f55eb297.png)

###### ディスプレイの幅を縮めると５つ目のテーブルは下に移動↓

![スクリーンショット 2017-06-06 16.11.52（2）.png](https://qiita-image-store.s3.amazonaws.com/0/142511/5bfedbc3-b774-a0ea-c914-13e62acee4e3.png)


行数が多いと見づらくなってしまうこともあるので、このように"レコード最大○行いったら、テーブルが横に増える"という見せ方ができると便利です。


（今回は3行で横に増えるようにし、また動的なものは扱っていませんが、例えばDBからデータを取得してそのデータの数(レコード数)によって3分割,2分割...などもこの方法で簡単にできます。!）