Как создать два набора переключателей в одну строку в HTML-таблице

Question

У меня есть таблица в угловом приложении, где у меня есть 4 переключателя в одной строке, однако я хотел бы разделить их на две группы по два переключателя, чтобы пользователь мог выбрать вариант да / нет в болезненном разделе ида / нет в безболезненном разделе.Как я мог это сделать?Мой код ниже:

<div>
    <table>
        <thead>

            <th></th>
            <th></th>
            <th colspan="2">Non Painful</th>
            <th colspan="2">Painful</th>

        </thead>
        <tbody>
            <tr>
                <td></td>
                <td></td>
                <td>No</td>
                <td>Yes</td>

                <td>No</td>
                <td>Yes</td>

            </tr>
            <tr>
                <td>1.1</td>
                <td>Moaning</td>
                <td>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="q1" id="q1.1-no" value="No" [(ngModel)]="survey.moaningNonPainful">
                    </div>
                </td>
                <td>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="q1" id="q1.1-yes" value="Yes" [(ngModel)]="survey.moaningNonPainful">
                    </div>
                </td>
                <td>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="q1" id="q1.2-No" value="No" [(ngModel)]="survey.moaningPainful">
                    </div>
                </td>
                <td>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="q1" id="q1.2-Yes" value="Yes" [(ngModel)]="survey.moaningPainful">
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>