Создание и заполнение таблицы html через jinja2

Подскажите как сделать такую таблицу в html:

A  |  B  |  C  |
----------------
   | b1  | c1  |
x1 -------------
   | b2  | c2  |
----------------
x2 | b15 | c44 |
----------------

Суть в том, что первая колонка может содержать 1 значение, однако в других колонках может быть несколько значений соответствующих значению из колонки 1. Т.е. я не хочу (в данном случае) в каждой строке колонки А вводить х1, а хочу сделать его общим для нескольких значений других колонок

Я пробовал сделать так (Но получается все криво):

<table style="border: 1px solid black;border-collapse: collapse;padding: 0px 5px;width: 100%;">
    <tr>
    <th style="border: 1px solid black;border-collapse: collapse;padding: 0px 5px;"><b>Category</b></th>
    <th style="border: 1px solid black;border-collapse: collapse;padding: 0px 5px;"><b>App</b></th>
    <th style="border: 1px solid black;border-collapse: collapse;padding: 0px 5px;"><b>Response time</b></th>
    <th style="border: 1px solid black;border-collapse: collapse;padding: 0px 5px;"><b>Status</b></th>
    </tr>
    {% for A in values %}
    <tr>
    <td style="border: 1px solid black;border-collapse: collapse;padding: 0px 5px;">{{A}}</td>
    {% for val in values[A] %}
    <td style="border: 1px solid black;border-collapse: collapse;padding: 0px 5px;">{{val[0]}}</td>
    <td style="border: 1px solid black;border-collapse: collapse;padding: 0px 5px;">{{val[2]}}</td>
    <td style="border: 1px solid black;border-collapse: collapse;padding: 0px 5px;">{{val[1]}}</td>
    </tr>
    {% endfor %}
    {% endfor %}
    </table>

Входные данные имеют такой вид - values = {'x1': [('b1', 'c1'),('b2', 'c2')],'x2': [('b15', 'c44')]