我一直在尝试为我的表格应用一些圆角,但似乎一直无法正确实现。当点击<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;
}