htmlとbootstrap でテーブルのようにデータを表示しているが部分的に行を結合したいのですがうまくできず困ってます

前提・実現したいこと

HTMLでbootstrapを使いコーディングをしています
部分的に行を結合したいのですが、やり方がわかりません。

このように行全体ではなく、表の部分だけ２行分で実装したいと思っております。

テーブルやbootstrapを使わない方法でしたらできるのですが、
bootstrapや少しのcssの記述で実装可能でしょうか？

どなたかご教授お願いします

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3
4<head>
5  <meta charset="UTF-8">
6  <title>Document</title>
7  <link rel="stylesheet" href="/admin-lte/css/skins/_all-skins.min.css">
8  <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
9</head>
10
11<body>
12  <div class="box box-primary">
13    <div class="box-body">
14
15      <div class="row form-group">
16        <label class="col-sm-2 control-label">名前</label>
17        <div class="col-sm-4">
18          たなか　たろう
19        </div>
20
21        <label class="col-sm-2 control-label">年</label>
22        <div class="col-sm-4">
23          １２
24        </div>
25      </div>
26
27      <div class="row form-group">
28        <label class="col-sm-2 control-label">性別</label>
29        <div class="col-sm-4">
30          男
31        </div>
32
33        <label class="col-sm-2 control-label">好み</label>
34        <div class="col-sm-4">
35          <table class="table table-bordered">
36            <tr>
37              <th>魚</th>
38              <th>肉</th>
39              <th>野菜</th>
40            </tr>
41
42            <tr>
43              <td>×</td>
44              <td>○</td>
45              <td>×</td>
46            </tr>
47          </table>
48        </div>
49      </div>
50
51      <div class="row form-group">
52        <label class="col-sm-2 control-label">出身</label>
53        <div class="col-sm-10">
54          日本
55        </div>
56      </div>
57
58    </div>
59  </div>
60</body>
61
62</html>
63
64### 補足情報（FW/ツールのバージョンなど）
65Bootstrap v3.4.1 (https://getbootstrap.com/)
66AdminLTE v2.4.15
67を使用してます

行動規範の内容に同意します

回答1件

ベストアンサー

bootstrapのグリッドは縦向き結合はできませんが入れ子にすることはできます。

html
1<div class="container-fluid">
2  <div class="row">
3    <div class="col-xs-2">
4      名前
5    </div>
6    <div class="col-xs-4">
7      たなか　たろう
8    </div>
9    <div class="col-xs-2">
10      年齢
11    </div>
12    <div class="col-xs-4">
13      12
14    </div>
15    <div class="col-xs-6"> <!-- ここを入れ子にしている -->
16      <div class="row">
17        <div class="col-xs-4">性別</div>
18        <div class="col-xs-8">男</div>
19        <div class="col-xs-4">出身</div>
20        <div class="col-xs-8">日本</div>
21      </div>
22    </div>
23    <div class="col-xs-2">
24      処理状態
25    </div>
26    <div class="col-xs-4">
27      <table class="table table-bordered">
28        <tr>
29          <th>魚</th>
30          <th>肉</th>
31          <th>野菜</th>
32        </tr>
33
34        <tr>
35          <td>×</td>
36          <td>○</td>
37          <td>×</td>
38        </tr>
39      </table>
40    </div>
41  </div>
42</div>