Радиус html-таблицы - программирование

Я пытаюсь применить некоторые закругленные углы к моей таблице, но я просто не могу понять. Моя таблица рушится после нажатия кнопки <thead>. <thead> должны иметь только верхние закругленные углы, в то время как последний элемент <tr> должен иметь только закругленные углы внизу. Я использую bootstrap в качестве рамки.

В настоящее время мой дизайн выглядит следующим образом:

Я хочу, чтобы мой <head> выглядел следующим образом:

в то время как последний элемент все еще имеет закругленные углы.

table.html

<table align="center" class="table table-curved" id="nextTeamTable">
    <thead data-parent="#bodyContainer" data-toggle="collapse" data-target="#tbodyCollapse">
        <tr>
            <th>HeadTitle</th>
        </tr>
    </thead>
    <tbody class="collapse" id="tbodyCollapse">
        <tr>
            <td>Body1</td>
            <td>Body2</td>
            <td>Body3</td>
        </tr>
    </tbody>
</table>

table.css

.table-curved {
    border-collapse:separate;
    border: solid #ccc 1px;
    border-radius: 25px;
}

.table-curved tr:last-child td
{
    border-bottom-left-radius: 25px;    
    border-bottom-right-radius: 25px;   
}

Ответ 1