Bootstrapではtableタグを使用せずに表のようなものを作れます。
今回はセルの縦結合（tableタグでいうrowspan）を作ってみます。
こんな感じになります。
rowspanのようなものを作る考え方
Bootstrapの表ではHTMLタグに「rowクラス（.row）」を指定して行を表示します。
tableタグのrowspanのようなものを実現するには、rowspanしたい項目以外の項目に別のrowクラスを定義します。
以下のようなイメージでrowクラスを組み合わせます。
- 大分類のrowを幅4と幅8の2項目で作成。
- 中分類のrowを幅6と6の2項目で作成、大分類の右側の項目（幅8の部分）に入れる。
- 小分類を幅12の1項目で作成。中分類の右側の項目に入れる。
Bootstrapは横幅を12の領域に区切ったグリッドシステムという考え方をします。
それぞれのrowに幅を12の領域で持っているので大分類、中分類、小分類の幅が同じになるように数値を調整しています。
これを分解すると次のようなイメージになります。
大分類、中分類、小分類のそれぞれでrowを作っています。
この場合rowは合計7つ作っていますね。
文字の入っていない項目に小さい分類のrowをいれます。
rowspanのようなものを作るソースを書いてみる
実際のソースです。
最初に載せた画像のテーブル（大分類が2つあるテーブル）のソースになります。
rowをたくさん入れているので階層が少し深くなりますが仕方ない！
<div class="row">
<div class="col-4 border">
大分類A
</div>
<div class="col-8">
<div class="row">
<div class="col-6 border">
中分類A
</div>
<div class="col-6">
<div class="row">
<div class="col border">
小分類A
</div>
</div>
<div class="row">
<div class="col border">
小分類B
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6 border">
中分類B
</div>
<div class="col-6">
<div class="row">
<div class="col border">
小分類C
</div>
</div>
<div class="row">
<div class="col border">
小分類D
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-4 border">
大分類B
</div>
<div class="col-8">
<div class="row">
<div class="col-6 border">
中分類C
</div>
<div class="col-6">
<div class="row">
<div class="col border">
小分類E
</div>
</div>
<div class="row">
<div class="col border">
小分類F
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6 border">
中分類D
</div>
<div class="col-6">
<div class="row">
<div class="col border">
小分類G
</div>
</div>
<div class="row">
<div class="col border">
小分類H
</div>
</div>
</div>
</div>
</div>
</div>なんにせよ
Bootstrapでrowspanを実現できました。
項目を縦につなげるようになることでだいたいの表は作れるんではないかと思います。
表の項目を繋ぎまくっていきましょう。
